quasarframework / quasar-ui-qmarkdown Goto Github PK
View Code? Open in Web Editor NEWA Quasar UI App Extension to display inline markdown
Home Page: https://quasarframework.github.io/quasar-ui-qmarkdown/
License: MIT License
A Quasar UI App Extension to display inline markdown
Home Page: https://quasarframework.github.io/quasar-ui-qmarkdown/
License: MIT License
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):
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:
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):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
Describe the bug
Code example conflicts with code feature
To Reproduce
Steps to reproduce the behavior:
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
app:extension
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):
Additional context
nothing
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
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
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.
No fix is currently available. Consider using an alternative package until a fix is made available.
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
When writing the language selector for C++, which is listed in prism.js documents (cpp), there is no syntax highlightning at all.
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)
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!! 👍🏻
This will allow css overrides to include gradients, etc
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.
Thanks.
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/
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?
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
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
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
it would be nice to support the dark mode
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?
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
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.
Steps to reproduce the behavior:
npx @quasar/cli create checkssr2
npx @quasar/cli ext add @quasar/qmarkdown
npx quasar dev -m ssr
/ -> 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
Set :toc-start="2"
and makeTree
method fails with [Vue warn]: Error in render: "TypeError: root is null"
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:
$ sudo apt update
$ sudo apt upgrade
Expected behavior
the size of pre should be equal the size of code
Desktop (please complete the following information):
Line numbers doesn't make sense for some things
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>
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?
They need to look more professional.
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
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:
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
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):
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.
A title (using === or ---) should be underlined as opposed to an H-reference (like ## Title).
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.
<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.
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.
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
}
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:
/*!
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:
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.
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.
Browser: Firefox Developer 71.0b9 (64 bit)
In the markdown-it-emoji list the number icons are displayed, while in qmarkdown no.
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
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:
cd ui && npm i
npm run dev
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Describe the bug
After successfully run the installation of quasar-ui-qmarkdown I receive the following error:
These dependencies were not found:
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):
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.