celine Posts - Answer Overflow

celine

•Created by celine on 3/17/2024 in #front-end

Next JS MDX

Plugins in mdx do not work. I have configured everything in next-config.mjs and created mdx-components.tsx in the root folder, but plugins refuse to work (all of them). Environment Information

npx --no-install next info

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home
Binaries:
  Node: 21.6.1
  npm: N/A
  Yarn: N/A
  pnpm: 8.15.1
Relevant Packages:
  next: 14.1.3
  eslint-config-next: 14.1.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.2

npx --no-install next info

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home
Binaries:
  Node: 21.6.1
  npm: N/A
  Yarn: N/A
  pnpm: 8.15.1
Relevant Packages:
  next: 14.1.3
  eslint-config-next: 14.1.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.2

// next.config.mjs
import createMDX from '@next/mdx'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypePrettyCode from 'rehype-pretty-code'
import rehypeSlug from 'rehype-slug'
import remarkGfm from 'remark-gfm'
import remarkMdx from 'remark-mdx'
// Abstract from **next.config.mjs**
const withMDX = createMDX({
  options: {
    remarkPlugins: [remarkMdx,remarkGfm],
    rehypePlugins: [rehypeAutolinkHeadings, rehypePrettyCode, rehypeSlug],
  },
})

export default withMDX(nextConfig)

// next.config.mjs
import createMDX from '@next/mdx'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypePrettyCode from 'rehype-pretty-code'
import rehypeSlug from 'rehype-slug'
import remarkGfm from 'remark-gfm'
import remarkMdx from 'remark-mdx'
// Abstract from **next.config.mjs**
const withMDX = createMDX({
  options: {
    remarkPlugins: [remarkMdx,remarkGfm],
    rehypePlugins: [rehypeAutolinkHeadings, rehypePrettyCode, rehypeSlug],
  },
})

export default withMDX(nextConfig)

The table shall look like this

| Column 1      | Column 2      | Column 3      |
| ------------- | ------------- | ------------- |
| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 |
| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |

| Column 1      | Column 2      | Column 3      |
| ------------- | ------------- | ------------- |
| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 |
| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |

But it simply appear in <p> tags as a raw paragraph and I dont know what's the issue. I came across the same problem in the Next JS repo, however their solutions did not help me. Expected Behavior Proper work of all plugins Browser Using Chrome Version 122.0.6261.129 (Official Build), (64 bit)

2 replies

KPCKevin Powell - Community

•Created by celine on 2/27/2024 in #front-end

Next JS routing got me confused

5 replies

KPCKevin Powell - Community

•Created by celine on 1/19/2024 in #front-end

How can I fix the issue with garbled characters that appear after selecting files using the input?

In my web application, I have implemented a file input element (<input type="file">) to allow users to select files. After selecting a file (I'm trying to open MS Word files, which are written in cyrillic), the content is displayed in an editable <div>. However, the text shows garbled characters. How can I handle different encodings (if needed) and ensure that the file content is correctly displayed without any garbled characters? Here's the code snippet:

<div class="import">
  <input type="file" onchange="openDocument()" />
</div>
  <div class="editor" contenteditable="true" id="editor" style="height: 297mm"></div>

<div class="import">
  <input type="file" onchange="openDocument()" />
</div>
  <div class="editor" contenteditable="true" id="editor" style="height: 297mm"></div>

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  min-width: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.editor {
  background-color: #ffffff;
  height: 100svh;
  width: 800px;
  margin: auto;
  padding: 48px;
  border: 1px solid #c7c7c7;
  margin-top: 20px;
  font-size: 16px;
}

.editor:focus {
  outline: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  min-width: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.editor {
  background-color: #ffffff;
  height: 100svh;
  width: 800px;
  margin: auto;
  padding: 48px;
  border: 1px solid #c7c7c7;
  margin-top: 20px;
  font-size: 16px;
}

.editor:focus {
  outline: none;
}

  const openDocument = async () => {
    const container = document.getElementById('editor')
    const fileInput = document.querySelector('input[type="file"]')

    if (fileInput.files && fileInput.files.length > 0) {
      const file = fileInput.files[0]
      const reader = new FileReader()
      reader.onload = function () {
        const fileContent = reader.result
        container.textContent = fileContent
      }
      reader.readAsText(file)
    }
  }

  const openDocument = async () => {
    const container = document.getElementById('editor')
    const fileInput = document.querySelector('input[type="file"]')

    if (fileInput.files && fileInput.files.length > 0) {
      const file = fileInput.files[0]
      const reader = new FileReader()
      reader.onload = function () {
        const fileContent = reader.result
        container.textContent = fileContent
      }
      reader.readAsText(file)
    }
  }

3 replies

Gaming

Programming