{
  "mixins": [
    {
      "props": {
        "fullscreen": {
          "type": "Boolean",
          "sync": true,
          "desc": "Fullscreen mode",
          "examples": [
            "# v-model:fullscreen=\"isFullscreen\""
          ],
          "category": "behavior"
        },
        "no-route-fullscreen-exit": {
          "type": "Boolean",
          "desc": "Changing route app won't exit fullscreen",
          "category": "behavior"
        },
        "model-value": {
          "extends": "model-value",
          "type": "String",
          "desc": "Model of the component; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
          "examples": [
            "# v-model=\"content\""
          ]
        },
        "readonly": {
          "extends": "readonly"
        },
        "square": {
          "extends": "square"
        },
        "flat": {
          "extends": "flat",
          "desc": "Applies a 'flat' design (no borders)"
        },
        "dense": {
          "extends": "dense",
          "desc": "Dense mode; toolbar buttons are shown on one-line only"
        },
        "dark": {
          "extends": "dark"
        },
        "disable": {
          "extends": "disable"
        },
        "min-height": {
          "type": "String",
          "desc": "CSS unit for the minimum height of the editable area",
          "default": "'10rem'",
          "examples": [
            "'15rem'",
            "'50vh'"
          ],
          "category": "style"
        },
        "max-height": {
          "type": "String",
          "desc": "CSS unit for maximum height of the input area",
          "examples": [
            "'1000px'",
            "'90vh'"
          ],
          "category": "style"
        },
        "height": {
          "type": "String",
          "desc": "CSS value to set the height of the editable area",
          "examples": [
            "'100px'",
            "'50vh'"
          ],
          "category": "style"
        },
        "definitions": {
          "type": "Object",
          "desc": "Definition of commands and their buttons to be included in the 'toolbar' prop",
          "examples": [
            "{ save: { tip: 'Save your work', icon: 'save', label: 'Save', handler: saveWork }, upload: { tip: 'Upload to cloud', icon: 'cloud_upload', label: 'Upload', handler: uploadIt } }"
          ],
          "definition": {
            "...commandName": {
              "type": "Object",
              "tsType": "QEditorCommand",
              "autoDefineTsType": true,
              "desc": "Command definition",
              "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": [
                    "true",
                    "() => !checkIfUserIsActive()"
                  ]
                },
                "type": {
                  "type": [
                    "String",
                    "null"
                  ],
                  "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"
        },
        "fonts": {
          "type": "Object",
          "desc": "Object with definitions of fonts",
          "examples": [
            "{ arial: 'Arial', arial_black: 'Arial Black', comic_sans: 'Comic Sans MS' }"
          ],
          "category": "toolbar"
        },
        "toolbar": {
          "type": "Array",
          "desc": "An array of arrays of Objects/Strings that you use to define the construction of the elements and commands available in the toolbar",
          "default": "[ [ 'left', 'center', 'right', 'justify' ], [ 'bold', 'italic', 'underline', 'strike' ], [ 'undo', 'redo' ] ]",
          "examples": [
            "[ 'left', 'center', 'right', 'justify' ]"
          ],
          "category": "toolbar"
        },
        "toolbar-color": {
          "extends": "color",
          "desc": "Font color (from the Quasar Palette) of buttons and text in the toolbar",
          "category": "toolbar"
        },
        "toolbar-text-color": {
          "extends": "text-color",
          "desc": "Text color (from the Quasar Palette) of toolbar commands",
          "category": "toolbar"
        },
        "toolbar-toggle-color": {
          "type": "String",
          "desc": "Choose the active color (from the Quasar Palette) of toolbar commands button",
          "default": "'primary'",
          "examples": [
            "'secondary'",
            "'blue-3'"
          ],
          "category": "toolbar"
        },
        "toolbar-bg": {
          "type": "String",
          "desc": "Toolbar background color (from Quasar Palette)",
          "default": "'grey-3'",
          "__runtimeDefault": true,
          "examples": [
            "'secondary'",
            "'blue-3'"
          ],
          "category": "toolbar"
        },
        "toolbar-outline": {
          "type": "Boolean",
          "desc": "Toolbar buttons are rendered \"outlined\"",
          "category": "toolbar|style"
        },
        "toolbar-push": {
          "type": "Boolean",
          "desc": "Toolbar buttons are rendered as a \"push-button\" type",
          "category": "toolbar|style"
        },
        "toolbar-rounded": {
          "type": "Boolean",
          "desc": "Toolbar buttons are rendered \"rounded\"",
          "category": "toolbar|style"
        },
        "paragraph-tag": {
          "type": "String",
          "desc": "Paragraph tag to be used",
          "values": [
            "'div'",
            "'p'"
          ],
          "default": "'div'",
          "category": "behavior"
        },
        "content-style": {
          "type": "Object",
          "tsType": "VueStyleObjectProp",
          "desc": "Object with CSS properties and values for styling the container of QEditor",
          "examples": [
            "{ backgroundColor: '#C0C0C0' }"
          ],
          "category": "style"
        },
        "content-class": {
          "type": [
            "String",
            "Array",
            "Object"
          ],
          "tsType": "VueClassProp",
          "desc": "CSS classes for the input area",
          "examples": [
            "'my-special-class'",
            "{ 'my-special-class': true }"
          ],
          "category": "style"
        },
        "placeholder": {
          "type": "String",
          "desc": "Text to display as placeholder",
          "examples": [
            "'Type your story here ...'"
          ],
          "category": "content"
        }
      },
      "events": {
        "fullscreen": {
          "desc": "Emitted when fullscreen state changes",
          "params": {
            "value": {
              "type": "Boolean",
              "desc": "Fullscreen state (showing/hidden)"
            }
          }
        },
        "update:fullscreen": {
          "desc": "Used by Vue on 'v-model:fullscreen' prop for updating its value",
          "params": {
            "value": {
              "type": "Boolean",
              "desc": "Fullscreen state (showing/hidden)"
            }
          }
        },
        "update:model-value": {
          "extends": "update:model-value",
          "params": {
            "value": {
              "type": "String",
              "desc": "The pure HTML of the content"
            }
          }
        },
        "dropdown-show": {
          "desc": "Emitted after a dropdown in the toolbar has triggered show()",
          "params": {
            "evt": {
              "extends": "evt"
            }
          },
          "addedIn": "v2.11.8"
        },
        "dropdown-before-show": {
          "desc": "Emitted when a dropdown in the toolbar triggers show() but before it finishes doing it",
          "params": {
            "evt": {
              "extends": "evt"
            }
          },
          "addedIn": "v2.11.8"
        },
        "dropdown-hide": {
          "desc": "Emitted after a dropdown in the toolbar has triggered hide()",
          "params": {
            "evt": {
              "extends": "evt"
            }
          },
          "addedIn": "v2.11.8"
        },
        "dropdown-before-hide": {
          "desc": "Emitted when a dropdown in the toolbar triggers hide() but before it finishes doing it",
          "params": {
            "evt": {
              "extends": "evt"
            }
          },
          "addedIn": "v2.11.8"
        },
        "link-show": {
          "desc": "Emitted when the toolbar for editing a link is shown",
          "addedIn": "v2.11.9"
        },
        "link-hide": {
          "desc": "Emitted when the toolbar for editing a link is hidden",
          "addedIn": "v2.11.9"
        },
        "keydown": {
          "internal": true
        },
        "click": {
          "internal": true
        },
        "blur": {
          "internal": true
        },
        "focus": {
          "internal": true
        }
      },
      "methods": {
        "toggleFullscreen": {
          "desc": "Toggle the view to be fullscreen or not fullscreen",
          "params": null,
          "returns": null
        },
        "setFullscreen": {
          "desc": "Enter the fullscreen view",
          "params": null,
          "returns": null
        },
        "exitFullscreen": {
          "desc": "Leave the fullscreen view",
          "params": null,
          "returns": null
        },
        "runCmd": {
          "desc": "Run contentEditable command at caret position and range",
          "params": {
            "cmd": {
              "type": "String",
              "desc": "Must be a valid execCommand method according to the designMode API",
              "examples": [
                "'copy'",
                "'cut'",
                "'paste'"
              ],
              "required": true
            },
            "param": {
              "type": "String",
              "desc": "The argument to pass to the command",
              "examples": [
                "'<small>Small Text</small>'"
              ]
            },
            "update": {
              "type": "Boolean",
              "desc": "Refresh the toolbar",
              "default": "true"
            }
          },
          "returns": null
        },
        "refreshToolbar": {
          "desc": "Hide the link editor if visible and force the instance to re-render",
          "params": null,
          "returns": null
        },
        "focus": {
          "desc": "Focus on the contentEditable at saved cursor position",
          "params": null,
          "returns": null
        },
        "getContentEl": {
          "desc": "Retrieve the content of the Editor",
          "params": null,
          "returns": {
            "type": "Element",
            "desc": "Provides the pure HTML within the editable area"
          }
        }
      }
    }
  ],
  "meta": {
    "docsUrl": "https://v2.quasar.dev/vue-components/editor"
  },
  "props": {
    "fullscreen": {
      "type": "Boolean",
      "sync": true,
      "desc": "Fullscreen mode",
      "examples": [
        "# v-model:fullscreen=\"isFullscreen\""
      ],
      "category": "behavior"
    },
    "no-route-fullscreen-exit": {
      "type": "Boolean",
      "desc": "Changing route app won't exit fullscreen",
      "category": "behavior"
    },
    "model-value": {
      "extends": "model-value",
      "type": "String",
      "desc": "Model of the component; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
      "examples": [
        "# v-model=\"content\""
      ]
    },
    "readonly": {
      "extends": "readonly"
    },
    "square": {
      "extends": "square"
    },
    "flat": {
      "extends": "flat",
      "desc": "Applies a 'flat' design (no borders)"
    },
    "dense": {
      "extends": "dense",
      "desc": "Dense mode; toolbar buttons are shown on one-line only"
    },
    "dark": {
      "extends": "dark"
    },
    "disable": {
      "extends": "disable"
    },
    "min-height": {
      "type": "String",
      "desc": "CSS unit for the minimum height of the editable area",
      "default": "'10rem'",
      "examples": [
        "'15rem'",
        "'50vh'"
      ],
      "category": "style"
    },
    "max-height": {
      "type": "String",
      "desc": "CSS unit for maximum height of the input area",
      "examples": [
        "'1000px'",
        "'90vh'"
      ],
      "category": "style"
    },
    "height": {
      "type": "String",
      "desc": "CSS value to set the height of the editable area",
      "examples": [
        "'100px'",
        "'50vh'"
      ],
      "category": "style"
    },
    "definitions": {
      "type": "Object",
      "desc": "Definition of commands and their buttons to be included in the 'toolbar' prop",
      "examples": [
        "{ save: { tip: 'Save your work', icon: 'save', label: 'Save', handler: saveWork }, upload: { tip: 'Upload to cloud', icon: 'cloud_upload', label: 'Upload', handler: uploadIt } }"
      ],
      "definition": {
        "...commandName": {
          "type": "Object",
          "tsType": "QEditorCommand",
          "autoDefineTsType": true,
          "desc": "Command definition",
          "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": [
                "true",
                "() => !checkIfUserIsActive()"
              ]
            },
            "type": {
              "type": [
                "String",
                "null"
              ],
              "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"
    },
    "fonts": {
      "type": "Object",
      "desc": "Object with definitions of fonts",
      "examples": [
        "{ arial: 'Arial', arial_black: 'Arial Black', comic_sans: 'Comic Sans MS' }"
      ],
      "category": "toolbar"
    },
    "toolbar": {
      "type": "Array",
      "desc": "An array of arrays of Objects/Strings that you use to define the construction of the elements and commands available in the toolbar",
      "default": "[ [ 'left', 'center', 'right', 'justify' ], [ 'bold', 'italic', 'underline', 'strike' ], [ 'undo', 'redo' ] ]",
      "examples": [
        "[ 'left', 'center', 'right', 'justify' ]"
      ],
      "category": "toolbar"
    },
    "toolbar-color": {
      "extends": "color",
      "desc": "Font color (from the Quasar Palette) of buttons and text in the toolbar",
      "category": "toolbar"
    },
    "toolbar-text-color": {
      "extends": "text-color",
      "desc": "Text color (from the Quasar Palette) of toolbar commands",
      "category": "toolbar"
    },
    "toolbar-toggle-color": {
      "type": "String",
      "desc": "Choose the active color (from the Quasar Palette) of toolbar commands button",
      "default": "'primary'",
      "examples": [
        "'secondary'",
        "'blue-3'"
      ],
      "category": "toolbar"
    },
    "toolbar-bg": {
      "type": "String",
      "desc": "Toolbar background color (from Quasar Palette)",
      "default": "'grey-3'",
      "__runtimeDefault": true,
      "examples": [
        "'secondary'",
        "'blue-3'"
      ],
      "category": "toolbar"
    },
    "toolbar-outline": {
      "type": "Boolean",
      "desc": "Toolbar buttons are rendered \"outlined\"",
      "category": "toolbar|style"
    },
    "toolbar-push": {
      "type": "Boolean",
      "desc": "Toolbar buttons are rendered as a \"push-button\" type",
      "category": "toolbar|style"
    },
    "toolbar-rounded": {
      "type": "Boolean",
      "desc": "Toolbar buttons are rendered \"rounded\"",
      "category": "toolbar|style"
    },
    "paragraph-tag": {
      "type": "String",
      "desc": "Paragraph tag to be used",
      "values": [
        "'div'",
        "'p'"
      ],
      "default": "'div'",
      "category": "behavior"
    },
    "content-style": {
      "type": "Object",
      "tsType": "VueStyleObjectProp",
      "desc": "Object with CSS properties and values for styling the container of QEditor",
      "examples": [
        "{ backgroundColor: '#C0C0C0' }"
      ],
      "category": "style"
    },
    "content-class": {
      "type": [
        "String",
        "Array",
        "Object"
      ],
      "tsType": "VueClassProp",
      "desc": "CSS classes for the input area",
      "examples": [
        "'my-special-class'",
        "{ 'my-special-class': true }"
      ],
      "category": "style"
    },
    "placeholder": {
      "type": "String",
      "desc": "Text to display as placeholder",
      "examples": [
        "'Type your story here ...'"
      ],
      "category": "content"
    }
  },
  "events": {
    "fullscreen": {
      "desc": "Emitted when fullscreen state changes",
      "params": {
        "value": {
          "type": "Boolean",
          "desc": "Fullscreen state (showing/hidden)"
        }
      }
    },
    "update:fullscreen": {
      "desc": "Used by Vue on 'v-model:fullscreen' prop for updating its value",
      "params": {
        "value": {
          "type": "Boolean",
          "desc": "Fullscreen state (showing/hidden)"
        }
      }
    },
    "update:model-value": {
      "extends": "update:model-value",
      "params": {
        "value": {
          "type": "String",
          "desc": "The pure HTML of the content"
        }
      }
    },
    "dropdown-show": {
      "desc": "Emitted after a dropdown in the toolbar has triggered show()",
      "params": {
        "evt": {
          "extends": "evt"
        }
      },
      "addedIn": "v2.11.8"
    },
    "dropdown-before-show": {
      "desc": "Emitted when a dropdown in the toolbar triggers show() but before it finishes doing it",
      "params": {
        "evt": {
          "extends": "evt"
        }
      },
      "addedIn": "v2.11.8"
    },
    "dropdown-hide": {
      "desc": "Emitted after a dropdown in the toolbar has triggered hide()",
      "params": {
        "evt": {
          "extends": "evt"
        }
      },
      "addedIn": "v2.11.8"
    },
    "dropdown-before-hide": {
      "desc": "Emitted when a dropdown in the toolbar triggers hide() but before it finishes doing it",
      "params": {
        "evt": {
          "extends": "evt"
        }
      },
      "addedIn": "v2.11.8"
    },
    "link-show": {
      "desc": "Emitted when the toolbar for editing a link is shown",
      "addedIn": "v2.11.9"
    },
    "link-hide": {
      "desc": "Emitted when the toolbar for editing a link is hidden",
      "addedIn": "v2.11.9"
    },
    "keydown": {
      "internal": true
    },
    "click": {
      "internal": true
    },
    "blur": {
      "internal": true
    },
    "focus": {
      "internal": true
    }
  },
  "methods": {
    "toggleFullscreen": {
      "desc": "Toggle the view to be fullscreen or not fullscreen",
      "params": null,
      "returns": null
    },
    "setFullscreen": {
      "desc": "Enter the fullscreen view",
      "params": null,
      "returns": null
    },
    "exitFullscreen": {
      "desc": "Leave the fullscreen view",
      "params": null,
      "returns": null
    },
    "runCmd": {
      "desc": "Run contentEditable command at caret position and range",
      "params": {
        "cmd": {
          "type": "String",
          "desc": "Must be a valid execCommand method according to the designMode API",
          "examples": [
            "'copy'",
            "'cut'",
            "'paste'"
          ],
          "required": true
        },
        "param": {
          "type": "String",
          "desc": "The argument to pass to the command",
          "examples": [
            "'<small>Small Text</small>'"
          ]
        },
        "update": {
          "type": "Boolean",
          "desc": "Refresh the toolbar",
          "default": "true"
        }
      },
      "returns": null
    },
    "refreshToolbar": {
      "desc": "Hide the link editor if visible and force the instance to re-render",
      "params": null,
      "returns": null
    },
    "focus": {
      "desc": "Focus on the contentEditable at saved cursor position",
      "params": null,
      "returns": null
    },
    "getContentEl": {
      "desc": "Retrieve the content of the Editor",
      "params": null,
      "returns": {
        "type": "Element",
        "desc": "Provides the pure HTML within the editable area"
      }
    }
  },
  "computedProps": {
    "caret": {
      "type": "Object",
      "tsType": "QEditorCaret",
      "desc": "The current caret state"
    }
  },
  "slots": {
    "[command]": {
      "desc": "Content for the given command in the toolbar"
    }
  }
}