forked from MapComplete/MapComplete
Add better support for markdown (switch nano-markdown for markdown-it as the former doesn't support backtick-code-formatting), add Markdown element. See #1929
This commit is contained in:
Pieter Vander Vennet
parent
9ead113555
commit
d2e7bac775
10 changed files with 120 additions and 32 deletions
83
package-lock.json
generated
83
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "mapcomplete",
|
||||
"version": "0.42.0",
|
||||
"version": "0.42.4",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "mapcomplete",
|
||||
"version": "0.42.0",
|
||||
"version": "0.42.4",
|
||||
"license": "GPL-3.0-or-later",
|
||||
"dependencies": {
|
||||
"@comunica/core": "^3.0.1",
|
||||
|
|
@ -52,6 +52,7 @@
|
|||
"lz-string": "^1.4.4",
|
||||
"mangrove-reviews-typescript": "^1.1.0",
|
||||
"maplibre-gl": "^4.1.1",
|
||||
"markdown-it": "^14.1.0",
|
||||
"monaco-editor": "^0.46.0",
|
||||
"nano-markdown": "^1.2.2",
|
||||
"opening_hours": "^3.6.0",
|
||||
|
|
@ -11319,6 +11320,14 @@
|
|||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/linkify-it": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
|
||||
"integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
|
||||
"dependencies": {
|
||||
"uc.micro": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/local-pkg": {
|
||||
"version": "0.4.3",
|
||||
"license": "MIT",
|
||||
|
|
@ -11540,6 +11549,27 @@
|
|||
"version": "2.0.0",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/markdown-it": {
|
||||
"version": "14.1.0",
|
||||
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
|
||||
"integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
|
||||
"dependencies": {
|
||||
"argparse": "^2.0.1",
|
||||
"entities": "^4.4.0",
|
||||
"linkify-it": "^5.0.0",
|
||||
"mdurl": "^2.0.0",
|
||||
"punycode.js": "^2.3.1",
|
||||
"uc.micro": "^2.1.0"
|
||||
},
|
||||
"bin": {
|
||||
"markdown-it": "bin/markdown-it.mjs"
|
||||
}
|
||||
},
|
||||
"node_modules/mdurl": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
|
||||
"integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
|
||||
},
|
||||
"node_modules/memoize": {
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/memoize/-/memoize-10.0.0.tgz",
|
||||
|
|
@ -12903,6 +12933,14 @@
|
|||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/punycode.js": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
|
||||
"integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/qrcode-generator": {
|
||||
"version": "1.4.4",
|
||||
"license": "MIT"
|
||||
|
|
@ -16042,6 +16080,11 @@
|
|||
"version": "1.2.0",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/uc.micro": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
|
||||
"integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A=="
|
||||
},
|
||||
"node_modules/ufo": {
|
||||
"version": "1.0.1",
|
||||
"license": "MIT"
|
||||
|
|
@ -24645,6 +24688,14 @@
|
|||
"lilconfig": {
|
||||
"version": "2.0.6"
|
||||
},
|
||||
"linkify-it": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
|
||||
"integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
|
||||
"requires": {
|
||||
"uc.micro": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"local-pkg": {
|
||||
"version": "0.4.3"
|
||||
},
|
||||
|
|
@ -24794,6 +24845,24 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"markdown-it": {
|
||||
"version": "14.1.0",
|
||||
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
|
||||
"integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
|
||||
"requires": {
|
||||
"argparse": "^2.0.1",
|
||||
"entities": "^4.4.0",
|
||||
"linkify-it": "^5.0.0",
|
||||
"mdurl": "^2.0.0",
|
||||
"punycode.js": "^2.3.1",
|
||||
"uc.micro": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"mdurl": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
|
||||
"integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
|
||||
},
|
||||
"memoize": {
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/memoize/-/memoize-10.0.0.tgz",
|
||||
|
|
@ -25573,6 +25642,11 @@
|
|||
"punycode": {
|
||||
"version": "2.3.0"
|
||||
},
|
||||
"punycode.js": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
|
||||
"integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA=="
|
||||
},
|
||||
"qrcode-generator": {
|
||||
"version": "1.4.4"
|
||||
},
|
||||
|
|
@ -27772,6 +27846,11 @@
|
|||
"typewise-core": {
|
||||
"version": "1.2.0"
|
||||
},
|
||||
"uc.micro": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
|
||||
"integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A=="
|
||||
},
|
||||
"ufo": {
|
||||
"version": "1.0.1"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -86,7 +86,6 @@
|
|||
"optimize-images-png": "cd assets/generated/ && find -name '*.png' -exec optipng '{}' \\; && echo 'PNGs are optimized'",
|
||||
"optimize-images-jpg": "cd assets/ && find . -regextype sed -regex \".*/.*.\\(jpg\\|JPG\\|JPEG\\|jpeg\\)\" -exec jpegoptim '{}' \\; && echo 'JPGs are optimized'",
|
||||
"optimize-images-scaledown-jpg": "cd assets/ && find . -regextype sed -regex \".*/.*.\\(jpg\\|JPG\\|JPEG\\|jpeg\\)\" -exec mogrify -resize 640x640\\> '{}' \\; && echo 'JPGs are optimized'",
|
||||
|
||||
"generate:stats": "vite-node scripts/GenerateSeries.ts",
|
||||
"reset:layeroverview": "npm run prep:layeroverview && npm run generate:layeroverview && npm run refresh:layeroverview",
|
||||
"prep:layeroverview": "mkdir -p ./src/assets/generated/layers; echo {\\\"themes\\\":[]} > ./src/assets/generated/known_themes.json && echo {\\\"layers\\\": []} > ./src/assets/generated/known_layers.json && rm -f ./src/assets/generated/layers/*.json && rm -f ./src/assets/generated/themes/*.json && cp ./assets/layers/usersettings/usersettings.json ./src/assets/generated/layers/usersettings.json && echo '{}' > ./src/assets/generated/layers/favourite.json && echo '{}' > ./src/assets/generated/layers/summary.json",
|
||||
|
|
@ -171,8 +170,8 @@
|
|||
"lz-string": "^1.4.4",
|
||||
"mangrove-reviews-typescript": "^1.1.0",
|
||||
"maplibre-gl": "^4.1.1",
|
||||
"markdown-it": "^14.1.0",
|
||||
"monaco-editor": "^0.46.0",
|
||||
"nano-markdown": "^1.2.2",
|
||||
"opening_hours": "^3.6.0",
|
||||
"osm-auth": "^2.2.0",
|
||||
"osmtogeojson": "^3.0.0-beta.5",
|
||||
|
|
|
|||
|
|
@ -781,10 +781,6 @@ video {
|
|||
float: left;
|
||||
}
|
||||
|
||||
.m-8 {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.m-4 {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
|
@ -797,6 +793,10 @@ video {
|
|||
margin: 0px;
|
||||
}
|
||||
|
||||
.m-8 {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.m-2 {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
|
@ -900,10 +900,6 @@ video {
|
|||
margin-right: 4rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
|
@ -936,6 +932,10 @@ video {
|
|||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
|
@ -1762,11 +1762,6 @@ video {
|
|||
border-color: rgb(75 85 99 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-gray-400 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(156 163 175 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-gray-800 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(31 41 55 / var(--tw-border-opacity));
|
||||
|
|
@ -1916,10 +1911,6 @@ video {
|
|||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.pr-0 {
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.pt-1 {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
|
|
@ -2721,7 +2712,7 @@ textarea {
|
|||
color: #7193bb;
|
||||
}
|
||||
|
||||
.literal-code {
|
||||
.literal-code, code {
|
||||
/* A codeblock */
|
||||
display: inline-block;
|
||||
background-color: lightgray;
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ export default class TagRenderingConfig {
|
|||
public readonly renderIconClass?: string
|
||||
public readonly question?: TypedTranslation<object>
|
||||
public readonly questionhint?: TypedTranslation<object>
|
||||
public readonly questionHintIsMd?: boolean
|
||||
public readonly condition?: TagsFilter
|
||||
public readonly invalidValues?: TagsFilter
|
||||
/**
|
||||
|
|
@ -80,7 +81,7 @@ export default class TagRenderingConfig {
|
|||
public readonly classes: string[] | undefined
|
||||
|
||||
constructor(
|
||||
config: string | TagRenderingConfigJson | QuestionableTagRenderingConfigJson,
|
||||
config: string | TagRenderingConfigJson | (QuestionableTagRenderingConfigJson & {questionHintIsMd?: boolean}),
|
||||
context?: string
|
||||
) {
|
||||
let json = <string | QuestionableTagRenderingConfigJson>config
|
||||
|
|
@ -136,6 +137,7 @@ export default class TagRenderingConfig {
|
|||
this.render = Translations.T(<any>json.render, translationKey + ".render")
|
||||
this.question = Translations.T(json.question, translationKey + ".question")
|
||||
this.questionhint = Translations.T(json.questionHint, translationKey + ".questionHint")
|
||||
this.questionHintIsMd = json["questionHintIsMd"] ?? false
|
||||
this.description = Translations.T(json.description, translationKey + ".description")
|
||||
this.editButtonAriaLabel = Translations.T(
|
||||
json.editButtonAriaLabel,
|
||||
|
|
|
|||
17
src/UI/Base/Markdown.svelte
Normal file
17
src/UI/Base/Markdown.svelte
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script lang="ts">
|
||||
import markdownit from "markdown-it"
|
||||
import { UIEventSource } from "../../Logic/UIEventSource"
|
||||
const md = markdownit()
|
||||
export let src: string
|
||||
export let srcWritable: UIEventSource<string> = undefined
|
||||
srcWritable?.addCallbackAndRunD(t => {
|
||||
src = t
|
||||
})
|
||||
if(typeof src !== "string") {
|
||||
throw "Markdown.svelte got a non-string object"
|
||||
}
|
||||
</script>
|
||||
{#if src?.length > 0}
|
||||
{@html md.render(src)}
|
||||
{/if}
|
||||
|
||||
|
|
@ -263,7 +263,7 @@
|
|||
|
||||
{#if config.questionhint}
|
||||
{#if config.questionHintIsMd}
|
||||
<Markdown src={config.questionHint} />
|
||||
<Markdown srcWritable={ config.questionhint.current} />
|
||||
{:else}
|
||||
<div class="max-h-60 overflow-y-auto">
|
||||
<SpecialTranslation
|
||||
|
|
@ -274,7 +274,7 @@
|
|||
feature={selectedElement}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
</legend>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
import QuestionPreview from "./QuestionPreview.svelte"
|
||||
import SchemaBasedMultiType from "./SchemaBasedMultiType.svelte"
|
||||
import ShowConversionMessage from "./ShowConversionMessage.svelte"
|
||||
import Markdown from "../Base/Markdown.svelte"
|
||||
|
||||
export let state: EditLayerState
|
||||
export let schema: ConfigMeta
|
||||
|
|
@ -97,9 +98,7 @@
|
|||
<h3>{schema.path.at(-1)}</h3>
|
||||
|
||||
{#if subparts.length > 0}
|
||||
<span class="subtle">
|
||||
{schema.description}
|
||||
</span>
|
||||
<Markdown src={schema.description}/>
|
||||
{/if}
|
||||
{#if $currentValue === undefined}
|
||||
No array defined
|
||||
|
|
|
|||
|
|
@ -41,10 +41,11 @@
|
|||
if (lastIsString) {
|
||||
types.splice(types.length - 1, 1)
|
||||
}
|
||||
const configJson: QuestionableTagRenderingConfigJson = {
|
||||
const configJson: QuestionableTagRenderingConfigJson & {questionHintIsMd: boolean}= {
|
||||
id: "TYPE_OF:" + path.join("_"),
|
||||
question: "Which subcategory is needed for " + schema.path.at(-1) + "?",
|
||||
questionHint: nmd(schema.description),
|
||||
questionHint: schema.description,
|
||||
questionHintIsMd: true,
|
||||
mappings: types
|
||||
.map((opt) => opt.trim())
|
||||
.filter((opt) => opt.length > 0)
|
||||
|
|
|
|||
|
|
@ -507,7 +507,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
|
|||
let result = ""
|
||||
while (match) {
|
||||
const [_, normal, key, leftover] = match
|
||||
let v = tags === undefined ? undefined : tags[key]
|
||||
let v = tags?.[key]
|
||||
if (v !== undefined && v !== null) {
|
||||
if (v["toISOString"] != undefined) {
|
||||
// This is a date, probably the timestamp of the object
|
||||
|
|
|
|||
|
|
@ -500,7 +500,7 @@ textarea {
|
|||
}
|
||||
|
||||
|
||||
.literal-code {
|
||||
.literal-code, code {
|
||||
/* A codeblock */
|
||||
display: inline-block;
|
||||
background-color: lightgray;
|
||||
|
|
|
|||
Loading…
Reference in a new issue