My editor.vue file is causing some issues
I attempted to recreate the auto-grow example from their playground
Even after adding a scrolling container and setting heights for elements, the problem persists.
<template>
<div ref="scrollingContainer" class="scrolling-container">
<div ref="editorNode" class="editor-node" :style="editorStyle" />
</div>
</template>
<script>
import Quill from "quill";
export default {
name: "App",
props: {
minHeight: {
type: String,
default: "450px",
},
scrollable: {
type: Boolean,
default: false,
},
},
data() {
return {
editorInstance: null,
editorOpts: {
modules: {
toolbar: [
[{ header: [1, 2, 3, false] }],
["bold", "italic", "underline"],
],
},
theme: "snow",
},
};
},
computed: {
editorStyle() {
var style = "min-height: " + this.minHeight + ";";
if (this.scrollable) {
style += "overflow-y:auto;";
style += "max-height: " + this.minHeight + ";";
}
return style;
},
},
mounted() {
this.editorOpts["scrollingContainer"] = this.$refs.scrollingContainer;
this.editorInstance = new Quill(this.$refs.editorNode, this.editorOpts);
// Setup handler for whenever things change inside Quill
this.$emit("instance-created", this.editorInstance);
},
};
</script>
<style lang="scss">
.editor-node {
height: auto;
}
.scrolling-container {
height: 100%;
min-height: 100%;
overflow-y: auto;
}
.ql-editor strong {
font-weight: bold;
}
.ql-editor {
letter-spacing: 0;
font-style: normal;
color: rgba(0, 0, 0, 0.84);
font-size: 16px;
line-height: 1.8;
}
.ql-editor p {
letter-spacing: 0;
font-weight: 300;
font-style: normal;
margin-block-start: 0px !important;
margin-block-end: 0px !important;
color: rgba(0, 0, 0, 0.84);
font-size: 16px;
line-height: 1.8;
}
@import "quill/dist/quill.snow.css";
</style>
You can also view a codesandbox demo here
If a lot of content is pasted, the page may scroll up unexpectedly, creating a strange user experience.
Update: The scroll-to-top issue in webkit-based browsers like Chrome can be resolved by upgrading Quill to version 2.0.0-dev.4