Пробелы удаляются при наборе текста в текстовом редакторе bb-rich в Firefox

Question

У меня возникла эта проблема при попытке ввести текст в текстовом редакторе bb-rich в Firefox. Всякий раз, когда я нажимаю клавишу пробела, я вижу добавление пробела, но как только я ввожу его, предыдущее пространство очищается.

Если я хочу добавить пробел, мне придется ввести текст, затем вручную переходить между словами и нажимать клавишу пробела.

Сначала я думал, что эта проблема может быть связана с текстовым редактором, который я использую (bb-rich-text-editor), но мне удалось воссоздать эту проблему только в браузере Firefox. Так что я думаю, что это проблема конкретного браузера. При поиске в Интернете я видел упомянутые похожие проблемы, особенно для браузера Firefox, но ничего не помогло.

      <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>

Я пытаюсь настроить банковское приложение с помощью Backbase. Я надеялся, что смогу найти простое решение этой проблемы, без необходимости поднимать билет на заднюю базу.

Я ожидаю, что смогу правильно добавлять пробелы внутри текстового редактора, независимо от того, какой браузер я использую.

Answer 1

Попробуйте добавить пробелы в качестве предварительного переноса для ql-editor:

      quill-editor .ql-container.ql-snow .ql-editor {
  white-space: pre-wrap;
 }