quasarframework / quasar-ui-qmarkdown

A Quasar UI App Extension to display inline markdown

If you are looking for QMarkdown that supports Quasar v2/Vue v3, then go here or visit the documentation.

QMarkdown (Vue Plugin, UMD and Quasar App Extension)

Everything you need for a complete Markdown solution.

QMarkdown is a Quasar component. It is a powerful markdown processor that plugs right into your Quasar application.

Structure

• /ui - standalone npm package (go here for more information)
• /app-extension - Quasar app extension
• /demo - sources for docs, demo and examples project
• live demo - live docs, demo and examples

Donate

If you appreciate the work that went into this project, please consider donating to Quasar or Jeff.

License

MIT (c) Jeff Galbraith [email protected]

quasar-ui-qmarkdown's Issues

TypeError: Cannot read property 'block' of undefined at Function.markdownItContainer

For a legitimate bug, in order to process faster, please go here https://codesandbox.io/s/qcalendar-bx1y7, fork the codesandbox, add code to reproduce the bug and submit link here:

Describe the bug
A clear and concise description of what the bug is.

TypeError: Cannot read property 'block' of undefined
at Function.markdownItContainer (index.esm.js?bc3c:6)
at MarkdownIt.use (index.esm.js?bc3c:6)
at extendContainers (index.esm.js?bc3c:6)

To Reproduce
Steps to reproduce the behavior:

1. `git clone https://github.com/mesqueeb/quasar-ui-easy-forms
2. cd ui && npm i
3. npm run dev
4. See error in console

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS] macOS
• Browser [e.g. chrome, safari] chrome
• Version [e.g. 22] latest

Markdown WYSIWYG Editor?

Absolutely amazing Quasar extension--I hope to use it. Do you have a suggestion on how to provide an WYSIWYG markdown editor for your users? Something similar to Quasar's core WYSIWYG editor but generates markdown instead of HTML on the back end? Thanks for your time and contributions.

QSplitter : same height on both panels

Is your feature request related to a problem? Please describe.
I'd like to have a textarea on one side, and a QMarkdown on the other side. I want my textarea to fit the panel. I see no easy way to do so, because the markdown panel height doesn't follow the preview panel height.

Describe the solution you'd like
Either add after-style and before-style so we can alter height or make sure both panel have same height.

Describe alternatives you've considered
See above.

Additional context

Thanks.

Option to use other markdown parser

Currently the package uses markdown-it which is one of the "bigger" markdown parsers.

https://bundlephobia.com/result?p=@quasar/[email protected]

When checking some others I found snarkdown to be a very small one. 33 times smaller gzipped

edit:
URL marked: https://marked.js.org/#/README.md#README.md
URL snarkdown: https://github.com/developit/snarkdown

New line inside code blocks

Describe the bug
\n Newline symbols should be ignored inside a code block variables

To Reproduce
Go to https://quasarframework.github.io/quasar-ui-qmarkdown/demo
Put next code inside

```js
hello("Content-type: application/x-www-form-urlencoded\r\n")
```

Expected behavior
I would like to see sth like

hello("Content-type: application/x-www-form-urlencoded\r\n")

**Actual behavior

hello("Content-type: application/x-www-form-urlencoded\r
")

Maybe its Prism related issue?

Error on SSR mode first run

Steps to reproduce the behavior:

1. Create a new Quasar project with:

npx @quasar/cli create checkssr2 

2. Add quasar ui markdown plugin

npx @quasar/cli ext add @quasar/qmarkdown

3. Run

npx quasar dev -m ssr

4. Got this error:

/ -> error during render
/Users/mac/dev/quasar/checkssr2/node_modules/@quasar/quasar-ui-qmarkdown/src/index.js:1
import { version } from '../package.json'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at compileFunction (<anonymous>)
    at wrapSafe (internal/modules/cjs/loader.js:1055:16)
    at Module._compile (internal/modules/cjs/loader.js:1103:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1159:10)
    at Module.load (internal/modules/cjs/loader.js:988:32)
    at Function.Module._load (internal/modules/cjs/loader.js:896:14)
    at Module.require (internal/modules/cjs/loader.js:1028:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at r (/Users/mac/dev/quasar/checkssr2/node_modules/vue-server-renderer/build.dev.js:9310:16)
    at Object.@quasar/quasar-ui-qmarkdown/src/index.js (webpack:/external "@quasar/quasar-ui-qmarkdown/src/index.js":1:0)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Module../node_modules/@quasar/quasar-app-extension-qmarkdown/src/boot/register.js (node_modules/@quasar/quasar-app-extension-qmarkdown/src/boot/register.js:1:0)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Module../.quasar/server-entry.js (server-bundle.js:332:118)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Object.0 (server-bundle.js:1742:18)

Versions info:
Dev mode.......... ssr
Pkg quasar........ v1.6.1
Pkg @quasar/app... v1.4.3
@quasar/quasar-app-extension-qmarkdown: ^1.0.15

Add "no-html" prop

markdown-it enables parsing of html. This should be optional and (in my opinion) an opt-out.

e.g. in the render funciton:

  render (h) {
    const opts = {
      html: true || noHtml,
      linkify: true,
      typographer: true,
      breaks: true,
      highlight
    }

Support Dark Mode

it would be nice to support the dark mode

Prop to disable blockquotes

Hi Jeff,
I'm a very happy user of QMarkdown with my Quasar project.

I would need a property to disable blockquotes (which use "> .. <", ">> ... <<", etc.), since I need to use these "<" and ">" symbols for mathematical comparisons in the markdown text.

Or is there some kind of escaping available, to use them in the markdown without creating blockquotes?

Thanks a lot, Michael

issues with line numbers

q-markdown content is not reactive

Is your feature request related to a problem? Please describe.
I was trying to add some mark down to my website when i noticed that the content is not reactive.

Describe the solution you'd like
Having a reactive content would be really usefull especially in cases like mine where the content should change based on language.

Additional context

<q-markdown>
{{ $t(page.content )}}
</q-markdown>

pre tag bottom margin too big when line numbers < 3

Describe the bug
when the line numbers of code less than 3, the size of pre tag is to big

To Reproduce
Steps to reproduce the behavior:

1. go to https://quasarframework.github.io/quasar-ui-qmarkdown/demo
2. in the Interactive Editor
3. input

$ sudo apt update
$ sudo apt upgrade

Expected behavior
the size of pre should be equal the size of code

Screenshots

Desktop (please complete the following information):

• OS: linux
• Browser [e.g. chrome, safari] chrome & firefox

Add mentions rendering option

It would be nice to have a "mentions" rendering option like showdown is doing with ghMentions and ghMentionsLink

description: https://github.com/showdownjs/showdown/wiki/Showdown-options
implementation: https://github.com/showdownjs/showdown/blob/4da93e8e136e5cc1f13ad2b3d5477c14e11aaafd/src/subParsers/makehtml/links.js#L251

change background-color to background

This will allow css overrides to include gradients, etc

[FEATURE REQUEST] Plug-in system for one-offs

Provide a plug-in system, so that dev can have customized markdown and parse/return results:
Example:

#[issue/id]

could be parsed to point to a github repo

Titles need underline

A title (using === or ---) should be underlined as opposed to an H-reference (like ## Title).

Quasar-ui-gmarkdown installation issue

Describe the bug
Upon installation of quasar-ui-qmarkdown with "quasar ext add qmarkdown" on the command line I get the following error.

C:\Users\ghadd\VSProjectsQuasar\firsttests>quasar ext add qmarkdown
app:extension Installing "qmarkdown" Quasar App Extension +0ms

app:extension Retrieving "quasar-app-extension-qmarkdown"... +2ms
app:spawn [sync] Running "npm install --save-dev quasar-app-extension-qmarkdown" +1ms

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/quasar-app-extension-qmarkdown - Not found
npm ERR! 404
npm ERR! 404 'quasar-app-extension-qmarkdown@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ghadd\AppData\Roaming\npm-cache_logs\2019-11-26T19_05_42_424Z-debug.log

app:spawn ⚠️ Command "npm" failed with exit code: 1 +3ms
app:extension ⚠️ Failed to install quasar-app-extension-qmarkdown +1ms

To Reproduce
just run "quasar ext add "qmarkdown" from terminal command.

Expected behavior
I expect the quasar ext qmarkdown to be installed.
Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 10 build 1909
• @quasar/[email protected]

Additional context
nothing

How to get "\n" to render a new line.

In your docs you have this as an example

<q-markdown src=":::\nThis is a **test** of markdown\n:::"></q-markdown>

But when I try to use \n in my app it just renders \n as text.

Also if I take the example from the docs and paste it into the demo tool, the same issue happens.

So how do I get it to work?

add rel="noopener noreferrer" for external links & phishing

Wondered if you would consider setting external links parsed by linkify to get the attribute:

rel="noopener noreferrer"

by default based on this:

https://gosink.in/are-you-making-website-vulnerable-target-blank-or-performance/

Word wrap on rendered text not working

Working off this example:
https://quasarframework.github.io/app-extension-qmarkdown/demo/editor

For some reason when I add text to the editor it extends out of the right hand component and creates a horizontal scroll bar. I can't track down where word wrapping is enforced but it works for code boxes and sections:

You can see the top line hasn't wrapped here for example in the render.

Any help would be appreciated. Thanks.

numbers on code blocks should not be selectable

feat: Have option to replace <a href="..."> with Vue Router links

Is your feature request related to a problem? Please describe.
Internal links are recognized by QMarkdown but browser is handling the redirect which is causing full page loads.

Describe the solution you'd like
Either replace links dynamically or provide a markdown link syntax to tell QMarkdown this is a Vue Router link

Describe alternatives you've considered
None other than the described solution but @hawkeye64 knows best!

Additional context
Thanks for all you do!! 👍🏻

Containers look "cartoonish"

They need to look more professional.

Typed carriage returns are not interpreted properly

Adding the following to the Interactive editor:

:::\nThis is a test\n:::

Does not generate proper markdown as \n is really the string \\n -- this needs to be converted properly.

Code block gets truncated when print the page as PDF

Describe the bug
For a code block that spans into multiple pages, only the code in the first page is printed/the rest is truncated

To Reproduce
Steps to reproduce the behavior:

1. Make a really long code block
2. Ctrl + P and print as pdf
3. Only the first 60 lines (for example) are included in the pdf

Expected behavior
All lines are included in the pdf

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Provide a way to add additional code-highlighters for Prism

When writing the language selector for C++, which is listed in prism.js documents (cpp), there is no syntax highlightning at all.

White space (empty lines) got removed

With the last update (I guess) empty lines between paragraphs now get removed. Was that intended? How would you recommend keeping some spacing between paragraphs?

UMD versions above 1.0.27 are broken

https://forum.quasar-framework.org/topic/6852/qmarkdown-umd-versions-above-1-0-27-are-broken

incorrect class definition for 'code'

<pre class="q-markdown--code class=" q-markdown--code__inner="" language-js""=""><code><span class="token number">1</span>px
</code></pre>

class def Should be:

class="q-markdown--code q-markdown--code__inner language-js"

This still displays properly though. I am sure there's a problem not seen in here.

Upstream security vulnerability markdown-it-katex https://www.npmjs.com/advisories/1466

Hi! I really love this plugin, but this security vulnerability prevents from being able to use it. I'm not sure if this module is something that can be replaced, forked or dropped but I would appreciate any feedback.

It looks like there are a few open MRs to fix the issue, but the project seems to be dead.

See https://github.com/waylonflinn/markdown-it-katex/pull/31/files

Security Advisory

https://www.npmjs.com/advisories/1466

  High            Cross-Site Scripting                                          
                                                                                
  Package         markdown-it-katex                                             
                                                                                
  Patched in      No patch available                                            
                                                                                
  Dependency of   @quasar/quasar-app-extension-qmarkdown [dev]                  
                                                                                
  Path            @quasar/quasar-app-extension-qmarkdown >                      
                  @quasar/quasar-ui-qmarkdown > markdown-it-katex               
                                                                                
  More info       https://npmjs.com/advisories/1466   

Overview

All versions of markdown-it-katex are vulnerable to Cross-Site Scripting (XSS). The package fails to properly escape error messages, which may allow attackers to execute arbitrary JavaScript in a victim's browser by triggering an error.

Remediation

No fix is currently available. Consider using an alternative package until a fix is made available.

Resources

• GitHub issue

rfs not working with q-markdown

Hi, I just installed qmarkdown, and I'm so happy that I can add text quicly to my files. But I use rfs for responsive text size (https://github.com/twbs/rfs), which is also amazing library. Unfortunately rfs is not resizing my markdown text and I have no clue, how can I make it work. Any suggestion is highly appreciated. Thanks.

Error after upgrading to Quasar rc2 from beta

QMarkdown stopped working. Browser console displays message:

TypeError: options.highlight is not a function
    at Object.default_rules.fence (renderer.js?7cc2:50)
    at Renderer.render (renderer.js?7cc2:326)
    at MarkdownIt.render (index.js?08ae:543)
    at Proxy.render (QMarkdown.js?a486:330)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3542)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
    at Watcher.get (vue.runtime.esm.js?2b0e:4473)
    at new Watcher (vue.runtime.esm.js?2b0e:4462)
    at mountComponent (vue.runtime.esm.js?2b0e:4067)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8409)

TypeError: options.highlight is not a function
    at Object.default_rules.fence (renderer.js?7cc2:50)
    at Renderer.render (renderer.js?7cc2:326)
    at MarkdownIt.render (index.js?08ae:543)
    at Proxy.render (QMarkdown.js?a486:330)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3542)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
    at Watcher.get (vue.runtime.esm.js?2b0e:4473)
    at Watcher.run (vue.runtime.esm.js?2b0e:4548)
    at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4304)
    at Array.eval (vue.runtime.esm.js?2b0e:1980)

Allow default options

If, for example, I want to disable Linkify in all my markdown pages I have to specifically add no-linkify to each page. It would be nice to have an option for default behavior across the app instead of repeating the same code in each page.
I'm not sure how to implement it though, otherwise I'd offer a PR

Additional props: contentCss and contentClass

If for example q-markdown is wrapped within q-field, I've noticed that the q-markdown content is not centered within the field area. It would be exquisite to add these props. At the moment I am using a margin: 10px 0 -10px 0 to make it look consistent with the rest of the design.

Accessing an anchor leads to a slightly wrong place

Link to the app code: https://gitlab.com/WoJ/testmarkdown2

Describe the bug

Accessing an anchor leads to a slightly wrong place

To Reproduce

After building the app, click on the PAGE ONE tab, and then choose one of the last entries on the right

Expected behavior

Going to an anchor, I expect to see that anchor on the page, but it is slightly above - I need to scroll up to see it

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version 84

missing renderMarkdown function for vue+markdown (.vmd) files

When running "quasar dev" I receive the following error.

error in ./src/markdown/configurator-help-general.vmd

Module build failed (from ./node_modules/ware-loader/lib/index.js):
ReferenceError: renderMarkdown is not defined

• index.js:73 Object.middleware
  [firsttests]/[@quasar]/quasar-app-extension-qmarkdown/src/index.js:73:26

• index.js:53
  [firsttests]/[ware-loader]/lib/index.js:53:19

• Array.forEach

• index.js:52 Object.module.exports
  [firsttests]/[ware-loader]/lib/index.js:52:16

To Reproduce
Steps to reproduce the behavior:

1. associate vmd extension markdown to file
2. run quasar dev
3. See error

Expected behavior
Clean compile.

Desktop (please complete the following information):
+-- OS: Windows 10 build 1909
+-- @vue/[email protected]
+-- @vue/[email protected]
+-- @quasar/[email protected]
+-- @quasar/app": "^1.3.1"
+-- @quasar/quasar-app-extension-qmarkdown": "^1.0.5",

Additional context

Some emojis are not shown correctly

Browser: Firefox Developer 71.0b9 (64 bit)

In the markdown-it-emoji list the number icons are displayed, while in qmarkdown no.

MarkdownIt Example

QMarkdown Screenshot

makeTree method fails to work when 'toc-start' is >1

Set :toc-start="2" and makeTree method fails with [Vue warn]: Error in render: "TypeError: root is null"

$q.dark links

I had to override the .q-markdown--link color with !important which is a bit more heavyhanded than I like.

.body--dark
  body
    background #606c71
    color #FFFDFA

  a, a.q-markdown--link
    color #00D5ED!important

containers have too much space at bottom

Dependabot couldn't find a package.json for this project

Dependabot couldn't find a package.json for this project.

Dependabot requires a package.json to evaluate your project's current JavaScript dependencies. It had expected to find one at the path: /package.json.

If this isn't a JavaScript project, or if it is a library, you may wish to disable updates for it from within Dependabot.

code blocks have padding on first line

Only the first line of multi-line code block is affected

IE syntax error

Is this extension meant to be IE 11 compatible? (sorry! :) )

I see a syntax error in the IE console and if I click to it and scroll up from it It looks like its under the sections for:

/*!

• @quasar/quasar-ui-qmarkdown v1.0.35
• (c) 2020 Jeff Galbraith [email protected]
• Released under the MIT License.
  */

A couple screenshots:

and if you can see it, the cursor is in the Math. area in this one when I click on the error in the console:

allow alternate char to be used in place of line numbers

Line numbers doesn't make sense for some things

quasar-ui-qmarkdown error when running quasar dev

Describe the bug
After successfully run the installation of quasar-ui-qmarkdown I receive the following error:

These dependencies were not found:

• src/markdown/configurator-help-general.vmd in ./node_modules/babel-loader/lib??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/base-configurator-toolbar.vue?vue&type=script&lang=js&
• src/markdown/configurator-overview-general.vmd in ./node_modules/babel-loader/lib??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/base-configurator-toolbar.vue?vue&type=script&lang=js&

To install them, you can run: npm install --save src/markdown/configurator-help-general.vmd src/markdown/configurator-overview-general.vmd

To Reproduce
Steps to reproduce the behavior:
1.Install @quasar/quasar-app-extension-qmarkdown": "^1.0.3"
2. run quasar dev

Expected behavior
Work as before.
Screenshots

Desktop (please complete the following information):

• OS: Windows build 1909
• @quasar/[email protected]
• @quasar/app": "^1.3.0"

Additional context

The use of VMD files has been working. Things started to change when moving to @quasar/quasar-app-extension-qmarkdown": "^1.0.3".

Following install instructions at https://quasarframework.github.io/quasar-ui-qmarkdown/docs
for VMD extension files.

[DOCS] Code example conflicts with code feature

Describe the bug
Code example conflicts with code feature

To Reproduce
Steps to reproduce the behavior:

1. Go to q-markdown#Code
2. See error

Screenshots

[BUG] Syntax highlighting is broken

Newlines must not be rendered

Describe the bug
If there is a newline in the markdown text you will get a line break in the resulting html.

To Reproduce

import text from '../markdown/howto.md'

<q-markdown :src="howto" />

where the file contains plain text with newlines.

Expected behavior
Newlines should be ignored.

Desktop (please complete the following information):

• OS: MacOS, Linux
• Browser: firefox, chrome, ...

Use links for the page headers

Example

# heading
[link](#heading)

Is your feature request related to a problem? Please describe.
when you click on a link a new page is opened

Describe the solution you'd like
it should open the link on the page

code block using prism have extra line at bottom