Preview not working properly and had to manually include the css file for it to be bundled with webpack. Am I missing something?

[aaronduce]

Describe your question Please describe your question in as much detail as possible.

Using webpack to bundle all my js and packages. Have to include css manually otherwise it is not working on the page. Also the preview is not working after all is imported? Am I doing something wrong or is there another prerequisite I don't have?

admin.js

import $ from 'jquery';
import * as EasyMDE from 'easymde';
import 'easymde/dist/easymde.min.css';

var easyMDE = new EasyMDE({
    element: $("#postAdminContent")[0],
    forceSync: true,
    placeholder: "Write using markdown here. Content will be automatically translated to be presentable on your site.",
    renderingConfig: {
        codeSyntaxHighlighting: true,
    },
});

dependencies

  "dependencies": {
    "@babel/preset-env": "^7.13.15",
    "@tailwindcss/forms": "^0.2.1",
    "@tailwindcss/line-clamp": "^0.2.0",
    "autoprefixer": "^10.1.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.2",
    "codemirror": "^5.60.0",
    "cross-env": "^7.0.3",
    "easymde": "^2.14.0",
    "jquery": "^3.6.0",
    "postcss": "^8.2.1",
    "postcss-cli": "^8.3.1",
    "postcss-import": "^14.0.0",
    "tailwindcss": "^2.0.2",
    "webpack": "^5.31.0",
    "webpack-dev-server": "^3.11.2",
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
    "css-loader": "^5.2.0",
    "style-loader": "^2.0.0",
    "webpack-cli": "^4.6.0"
  }

[Ionaru]

You need to manually import the CSS, this is correct.

Can you provide screenshots of the problem with the preview you are experiencing?

[aaronduce]

[Ionaru]

Any errors in your console?

[aaronduce]

None

[Ionaru]

Very strange, it removed all the markdown syntax but does not render the HTML correctly, try to make sure webpack doesn't remove any vital code from the package like marked. If you put a normal h1 element outside the editor, does that render correctly?

[aaronduce]

Yes the normal h1 has no issues - i will try checking webpack as soon as i can

[aaronduce]

Re my previous message: normal h1 doesnt work actually. Seems that tailwind overwrites the original styling. I will look into this but seems to conflict.

[Ionaru]

The preview window relies on the standard browser styling of elements, combined with whatever marked adds.

[aaronduce]

Sorted - it seems if you are using Tailwind, it conflicts as default styling is overridden in favour of utility classes.

To get around this, you would need to:

• Install the Tailwind Typography plugin npm install @tailwindcss/typography
• Add as a plugin to your tailwind.config.js file:

  plugins: [
  require('@tailwindcss/forms'),
  require('@tailwindcss/line-clamp'),
  require('@tailwindcss/typography'),
  ],

• Wrap the textarea or target element for EasyMDE to use in a 'prose' element

  <article class="prose max-w-none">
  <!-- textarea..... -->
  </article>