react-quill remove <p> tag's class or combine <p> tag

Yallu201 commented 7 months ago

Symptom

When the <p> tag containing the class attribute (ql-align-center) is entered as value prop into the ReactQuill component as a string, the class is removed or the <p> tags are combined into one.

Case 1

<p class="ql-align-center">text</p>
<p class="ql-align-center">text</p>
<p class="ql-align-center">text</p>

⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️

<p>texttexttext</p>

Case 2

<p class="ql-align-center">test</p>
<p class="ql-align-center"><br></p>
<p class="ql-align-center">test</p>
<p class="ql-align-center"><br></p>
<p class="ql-align-center">test</p>

⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️

<p class="ql-align-center">test</p>
<p class="ql-align-center">test</p>
<p>test</p>

Temporary measure

Central alignment is maintained when you enter a line character under the centrally aligned

tag.

ReactQuill version

[x] master (v2.0.0)

Dependencies & DevDependencies

  "dependencies": {
    "@ant-design/colors": "^6.0.0",
    "@ant-design/icons": "^4.7.0",
    "@loadable/component": "^5.15.2",
    "@popperjs/core": "^2.11.0",
    "@reduxjs/toolkit": "^1.6.2",
    "antd": "^4.16.13",
    "antd-img-crop": "^4.12.2",
    "array-move": "^4.0.0",
    "axios": "^0.24.0",
    "classnames": "^2.3.1",
    "fast-deep-equal": "^3.1.3",
    "jwt-decode": "^3.1.2",
    "lodash.clonedeep": "^4.5.0",
    "lodash.isequal": "^4.5.0",
    "lodash.throttle": "^4.1.1",
    "moment": "^2.29.1",
    "normalize.css": "^8.0.1",
    "quill": "^1.3.7",
    "quill-image-uploader": "^1.2.2",
    "react": "^17.0.0",
    "react-cookie": "^4.1.1",
    "react-daum-postcode": "^3.0.1",
    "react-dom": "^17.0.0",
    "react-query": "^3.33.4",
    "react-quill": "^2.0.0",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.0.2",
    "react-sortable-hoc": "^2.0.0",
    "react-use": "^17.4.0",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "swiper": "^8.4.4",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@commitlint/cli": "^14.1.0",
    "@commitlint/config-conventional": "^14.1.0",
    "@rollup/plugin-strip": "^2.1.0",
    "@types/jquery": "^3.5.10",
    "@types/loadable__component": "^5.13.4",
    "@types/lodash.clonedeep": "^4.5.6",
    "@types/lodash.isequal": "^4.5.5",
    "@types/lodash.throttle": "^4.1.6",
    "@types/node": "^16.11.7",
    "@types/quill": "1.3.10",
    "@types/react": "^17.0.0",
    "@types/react-beautiful-dnd": "^13.1.2",
    "@types/react-dom": "^17.0.0",
    "@types/react-redux": "^7.1.20",
    "@types/redux-logger": "^3.0.9",
    "@types/redux-persist": "^4.3.1",
    "@types/summernote": "^0.8.6",
    "@types/uuid": "^8.3.3",
    "@typescript-eslint/eslint-plugin": "^5.3.1",
    "@typescript-eslint/parser": "^5.3.1",
    "@vitejs/plugin-react": "^1.0.0",
    "autoprefixer": "^10.4.7",
    "commitizen": "^4.2.4",
    "cz-conventional-changelog": "^3.3.0",
    "eslint": "^8.2.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.27.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "husky": "^7.0.0",
    "lint-staged": "^11.2.6",
    "postcss": "^8.4.14",
    "prettier": "^2.4.1",
    "rc-field-form": "1.20.0",
    "rc-picker": "^2.5.19",
    "rc-upload": "^4.3.2",
    "redux": "^4.1.2",
    "sass": "^1.43.4",
    "tailwindcss": "^3.1.2",
    "typescript": "^4.4.4",
    "vite": "^5.1.6"
  },

elsonz commented 7 months ago

same issue happend to me...

richardkc commented 6 months ago

same to me...

richardkc commented 6 months ago

same to me...

replaced quill to tiptap, now everything work perfectly

nssprite commented 5 months ago

same issue to me, how to solve?

zenoamaro / react-quill