Почему я не вижу точку и цифры при использовании черновика. js

Question

РЕДАКТИРОВАТЬ: ОК, я смог изолировать то, что вызывало проблему в редакторе, и это overflow-y: auto;, но если я не установлю это, то редактор переполняет его контейнер. Я попытался установить его на overflow-y: scroll;, но это та же самая проблема с пулями / числами, которые не отображаются.

Так что я вставлял черновик. js в свое приложение и использовал черновик js -plugins.

Сегодня я реализовал много вещей, и я только что понял, что когда я использую блок, как нумерованные или ненумерованные списки, тогда я не вижу их в редактор. Если я опубликую sh мою форму, хотя, когда я go проверю ее публичную c версию, то списки там просто отлично. Проблема только в самом редакторе, что я его не вижу.

Вот мой код редактора:

import "./styles.scss";
import React, { useState, useEffect } from "react";

import { connect } from "react-redux";

import Editor from "draft-js-plugins-editor";
import { EditorState } from "draft-js";
import { stateToHTML } from "draft-js-export-html";

import createHashtagPlugin from "draft-js-hashtag-plugin";
import createLinkifyPlugin from "draft-js-linkify-plugin";
import createEmojiPlugin from "draft-js-emoji-plugin";
import createInlineToolbarPlugin, {
  Separator
} from "draft-js-inline-toolbar-plugin";
import createMentionPlugin, {
  defaultSuggestionsFilter
} from "draft-js-mention-plugin";
import createDividerPlugin from "draft-js-divider-plugin";
import createLinkPlugin from "draft-js-anchor-plugin";
import createUndoPlugin from "draft-js-undo-plugin";

import "../../../../node_modules/draft-js-alignment-plugin/lib/plugin.css";
import "../../../../node_modules/draft-js-emoji-plugin/lib/plugin.css";
import "../../../../node_modules/draft-js-inline-toolbar-plugin/lib/plugin.css";
import "../../../../node_modules/draft-js-mention-plugin/lib/plugin.css";
import "../../../../node_modules/draft-js-divider-plugin/lib/plugin.css";
import "../../../../node_modules/draft-js-undo-plugin/lib/plugin.css";
import "../../../../node_modules/draft-js-hashtag-plugin/lib/plugin.css";

import { fetchAllUsers } from "../../../actions";
import HeadlinesButton from "./headlinesButton";
import {
  ItalicButton,
  BoldButton,
  UnderlineButton,
  UnorderedListButton,
  OrderedListButton
} from "draft-js-buttons";

const linkifyPlugin = createLinkifyPlugin();
const hashtagPlugin = createHashtagPlugin();

const emojiPlugin = createEmojiPlugin();
const { EmojiSuggestions, EmojiSelect } = emojiPlugin;
const inlineToolbarPlugin = createInlineToolbarPlugin();
const { InlineToolbar } = inlineToolbarPlugin;
const mentionPlugin = createMentionPlugin();
const { MentionSuggestions } = mentionPlugin;
const dividerPlugin = createDividerPlugin(); /// doesn't work. Why?
const undoPlugin = createUndoPlugin();
const { UndoButton, RedoButton } = undoPlugin;
const linkPlugin = createLinkPlugin();
const { LinkButton } = linkPlugin; //can't integrate. Keep trying

const plugins = [
  linkifyPlugin,
  hashtagPlugin,
  emojiPlugin,
  inlineToolbarPlugin,
  mentionPlugin,
  dividerPlugin,
  undoPlugin,
  linkPlugin
];

const RichTextEditor = ({ onChange, users, fetchAllUsers }) => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());
  const [suggestions, setSuggestions] = useState(users);

  useEffect(() => {
    fetchAllUsers();
  }, []);

  const handleChange = editorState => {
    setEditorState(editorState);
    let html = stateToHTML(editorState.getCurrentContent());
    onChange(html);
  };

  const onSearchChange = ({ value }) => {
    setSuggestions(defaultSuggestionsFilter(value, users));
  };

  const onAddMention = () => {
    // get the mention object selected
  };

  return (
    <div className="rich-text-editor">
      <div className="rich-text-editor__container tiny-margin-bottom">
        <Editor
          editorState={editorState}
          onChange={handleChange}
          plugins={plugins}
        />
      </div>
      <EmojiSuggestions />

      <MentionSuggestions
        onSearchChange={onSearchChange}
        suggestions={suggestions}
        onAddMention={onAddMention}
      />
      <InlineToolbar>
        {// may be use React.Fragment instead of div to improve perfomance after React 16
        externalProps => (
          <>
            <BoldButton {...externalProps} />
            <ItalicButton {...externalProps} />
            <UnderlineButton {...externalProps} />
            <Separator {...externalProps} />
            <HeadlinesButton {...externalProps} />
            <UnorderedListButton {...externalProps} />
            <OrderedListButton {...externalProps} />
          </>
        )}
      </InlineToolbar>

      <EmojiSelect />
      <span className="tiny-margin-right" />
      <UndoButton />
      <span className="tiny-margin-right" />
      <RedoButton />
    </div>
  );
};

const mapStateToProps = state => {
  return {
    users: state.users
  };
};

export default connect(mapStateToProps, { fetchAllUsers })(RichTextEditor);

А это мои стили:

.rich-text-editor {
  width: 100%;
  height: max-content;
  font-family: GilroyLight, Arimo;
  font-size: 1.6rem;
  margin-top: 3rem;
  padding: 3rem;
  outline: none;
  border: none;
  background-color: white;
  box-shadow: 0 0.2rem 2rem rgb(228, 228, 228);
  border-radius: 3rem;
  display: block;

  &__container {
    height: 100%;
    overflow-y: auto;
    overflow-x: visible;

  }
}

.public-DraftEditorPlaceholder-inner {
  position: absolute;
  color: #ccc;
  pointer-events: none;
}
.public-DraftEditor-content {
  height: max-content;
  max-height: 80rem;
  overflow-x: visible;
}

Я пытался поиграть с шириной определенных элементов и установил max-content или 100%. Я пытался поиграть с overflow-x и установить его в видимом виде, но не могу понять, почему я столкнулся с этой проблемой.

** Кроме того, когда я использую эти элементы блока, появляется индикация ( цифра / маркированный знак) слева от текста удерживайте текст выровненным с другим текстом, а не делайте его внутри с отступом. Это вызывает проблему, потому что независимо от того, какое заполнение я установил на контейнере, внезапно становится недостаточно, потому что эти индикаторы находятся ближе к краю, чем должны быть.

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