I got this issue while trying to type inside a bb-rich-text-editor in Firefox. Whenever I click the spacebar key, I see a space being added, but soon as I type in, the previous space gets cleared.
If I want to add a space, I would have to type in the text, then manually go between the words and click spacebar key.
At first I thought this issue might be with the the text editor I use (bb-rich-text-editor), but I was only able to recreate this issue in the firefox browser. So I am thinking its a browser specific issue. Upon searching through the web, I saw similar issues mentioned, specifically for the firefox browser, but nothing worked.
<bb-rich-text-editor-ui label="Message" aria-label="Message" placeholder="Write some text" formcontrolname="body" aria-invalid="false" aria-describedby="compose-message-body-error-message" class="ng-dirty ng-valid ng-touched" required="">
<div class="bb-rich-text-editor">
<label class="bb-rich-text-editor__label" id="bb_element_7">Message</label><!---->
<div tabindex="0" role="textbox" class="bb-rich-text-editor__textbox form-control" aria-labelledby="bb_element_7">
<quill-editor customtoolbarposition="bottom" data-role="quill-editor" class="bb-rich-text-editor__content" placeholder="Write some text" readonly="false" aria-label="Message">
<div quill-editor-element="" class="ql-container ql-snow">
<div class="ql-editor" data-gramm="false" contenteditable="true" data-placeholder="Write some text">
<p>dwew</p>
<p> q q q q </p>
</div>
<div class="ql-clipboard" contenteditable="true" tabindex="-1"></div>
<div class="ql-tooltip ql-hidden"><a class="ql-preview" rel="noopener noreferrer" target="_blank" href="about:blank"></a><input type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL"><a class="ql-action"></a><a class="ql-remove"></a></div>
</div>
<!----><!----><!----><!---->
<div quill-editor-toolbar="" class="ql-toolbar ql-snow">
<div class="ql-format-group" aria-expanded="false">
<span container="body" triggers="hover focus click"><button bbbutton="" color="link-dark" class="ql-bold btn-link-dark btn btn-md btn-circle" tabindex="0" title="Bold" data-role="Bold" type="button"><i role="img" class="bb-icon bb-icon-format-bold bb-icon--md" aria-hidden="true"></i></button></span><!----><!----><!----><!----><!----><span container="body" triggers="hover focus click"><button bbbutton="" color="link-dark" class="ql-italic btn-link-dark btn btn-md btn-circle" tabindex="0" title="Italic" data-role="Italic" type="button"><i role="img" class="bb-icon bb-icon-format-italic bb-icon--md" aria-hidden="true"></i></button></span><!----><!----><!----><!----><!----><span container="body" triggers="hover focus click"><button bbbutton="" color="link-dark" class="ql-underline btn-link-dark btn btn-md btn-circle" tabindex="0" title="Underline" data-role="Underline" type="button"><i role="img" class="bb-icon bb-icon-format-underlined bb-icon--md" aria-hidden="true"></i></button></span><!----><!----><!----><!----><!----><span container="body" triggers="hover focus click"><button bbbutton="" color="link-dark" class="ql-strike btn-link-dark btn btn-md btn-circle" tabindex="0" title="Strikethrough" data-role="Strikethrough" type="button"><i role="img" class="bb-icon bb-icon-format-strikethrough bb-icon--md" aria-hidden="true"></i></button></span><!----><!----><!----><!----><!----><!---->
</div>
<div class="ql-format-group">
<span container="body" triggers="hover focus click"><button bbbutton="" color="link-dark" class="ql-list btn-link-dark btn btn-md btn-circle" tabindex="0" title="Ordered list" data-role="Ordered List" value="ordered" type="button"><i role="img" class="bb-icon bb-icon-format-list-numbered bb-icon--md" aria-hidden="true"></i></button></span><!----><!----><!----><!----><!----><span container="body" triggers="hover focus click"><button bbbutton="" color="link-dark" class="ql-list btn-link-dark btn btn-md btn-circle" tabindex="0" title="Unordered list" data-role="Unordered List" value="bullet" type="button"><i role="img" class="bb-icon bb-icon-format-list-bulleted bb-icon--md" aria-hidden="true"></i></button></span><!----><!----><!----><!----><!----><!---->
</div>
<div class="ql-format-group" aria-expanded="false">
<!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><!----><span container="body" triggers="hover focus click"><button bbbutton="" color="link-dark" class="ql-link btn-link-dark btn btn-md btn-circle" tabindex="0" title="Link" data-role="Link" type="button"><i role="img" class="bb-icon bb-icon-link bb-icon--md" aria-hidden="true"></i></button></span><!----><!----><!----><!----><!----><!---->
</div>
<div class="ql-format-group">
<!----><!----><!----><!----><!---->
</div>
<!---->
</div>
<!---->
</quill-editor>
</div>
<p data-role="char-counter" class="bb-rich-text-editor__char-counter">
<span dir="ltr">13 / 300</span><!---->
</p>
<!---->
</div>
<bb-modal-ui>
<!---->
</bb-modal-ui>
</bb-rich-text-editor-ui>
I am trying to setup a banking app using backbase. I was hoping I could get a simple solution for this, without having to raise a ticket to the backbase.
I am expecting to be able to add spaces properly inside the text editor, regardless of which browser I use.
Try adding whitespace as pre-wrap for ql-editor:
quill-editor .ql-container.ql-snow .ql-editor {
white-space: pre-wrap;
}