internal link rendering
This commit is contained in:
parent
6f67216a60
commit
c48a54efe7
2
webapp/package-lock.json
generated
2
webapp/package-lock.json
generated
@ -9,6 +9,7 @@
|
|||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"crypto-js": "^4.1.1",
|
"crypto-js": "^4.1.1",
|
||||||
|
"marked": "^4.0.17",
|
||||||
"svelte-icons": "^2.1.0",
|
"svelte-icons": "^2.1.0",
|
||||||
"svelte-markdown": "^0.2.2"
|
"svelte-markdown": "^0.2.2"
|
||||||
},
|
},
|
||||||
@ -17,6 +18,7 @@
|
|||||||
"@sveltejs/kit": "^1.0.0-next.350",
|
"@sveltejs/kit": "^1.0.0-next.350",
|
||||||
"@tailwindcss/typography": "^0.5.2",
|
"@tailwindcss/typography": "^0.5.2",
|
||||||
"@types/crypto-js": "^4.1.1",
|
"@types/crypto-js": "^4.1.1",
|
||||||
|
"@types/marked": "^4.0.3",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.27.0",
|
"@typescript-eslint/eslint-plugin": "^5.27.0",
|
||||||
"@typescript-eslint/parser": "^5.27.0",
|
"@typescript-eslint/parser": "^5.27.0",
|
||||||
"autoprefixer": "^10.4.7",
|
"autoprefixer": "^10.4.7",
|
||||||
|
@ -17,6 +17,7 @@
|
|||||||
"@sveltejs/kit": "^1.0.0-next.350",
|
"@sveltejs/kit": "^1.0.0-next.350",
|
||||||
"@tailwindcss/typography": "^0.5.2",
|
"@tailwindcss/typography": "^0.5.2",
|
||||||
"@types/crypto-js": "^4.1.1",
|
"@types/crypto-js": "^4.1.1",
|
||||||
|
"@types/marked": "^4.0.3",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.27.0",
|
"@typescript-eslint/eslint-plugin": "^5.27.0",
|
||||||
"@typescript-eslint/parser": "^5.27.0",
|
"@typescript-eslint/parser": "^5.27.0",
|
||||||
"autoprefixer": "^10.4.7",
|
"autoprefixer": "^10.4.7",
|
||||||
@ -36,6 +37,7 @@
|
|||||||
"type": "module",
|
"type": "module",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"crypto-js": "^4.1.1",
|
"crypto-js": "^4.1.1",
|
||||||
|
"marked": "^4.0.17",
|
||||||
"svelte-icons": "^2.1.0",
|
"svelte-icons": "^2.1.0",
|
||||||
"svelte-markdown": "^0.2.2"
|
"svelte-markdown": "^0.2.2"
|
||||||
}
|
}
|
||||||
|
@ -1,9 +1,18 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import SvelteMarkdown from 'svelte-markdown';
|
import SvelteMarkdown from 'svelte-markdown';
|
||||||
import Heading from '$lib/renderers/Heading.svelte';
|
import Heading from '$lib/marked/renderers/Heading.svelte';
|
||||||
import List from '$lib/renderers/List.svelte';
|
import List from '$lib/marked/renderers/List.svelte';
|
||||||
|
import InternalLink from '$lib/marked/renderers/InternalLink.svelte';
|
||||||
|
import tokenizer from '$lib/marked/tokenizer';
|
||||||
|
import { marked } from 'marked';
|
||||||
|
import extensions from '$lib/marked/extensions';
|
||||||
|
|
||||||
export let plaintext: string;
|
export let plaintext: string;
|
||||||
|
|
||||||
|
// @ts-ignore: typing mismatch
|
||||||
|
marked.use({ extensions: extensions });
|
||||||
|
|
||||||
|
const options = marked.defaults;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
@ -11,5 +20,9 @@
|
|||||||
class="prose max-w-none prose-li:my-0 prose-ul:mt-0 prose-ol:mt-0 leading-7
|
class="prose max-w-none prose-li:my-0 prose-ul:mt-0 prose-ol:mt-0 leading-7
|
||||||
prose-strong:font-bold"
|
prose-strong:font-bold"
|
||||||
>
|
>
|
||||||
<SvelteMarkdown renderers={{ heading: Heading, list: List }} source={plaintext} />
|
<SvelteMarkdown
|
||||||
|
renderers={{ heading: Heading, list: List, 'internal-link': InternalLink }}
|
||||||
|
source={plaintext}
|
||||||
|
{options}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
21
webapp/src/lib/marked/extensions.ts
Normal file
21
webapp/src/lib/marked/extensions.ts
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
const InternalLinkExtension = {
|
||||||
|
name: 'internal-link',
|
||||||
|
level: 'inline',
|
||||||
|
start(src: string) {
|
||||||
|
return src.match(/^\[\[/)?.index;
|
||||||
|
},
|
||||||
|
tokenizer(src: string) {
|
||||||
|
const match = src.match(/^\[\[([^\n]+?)]\]/);
|
||||||
|
if (match) {
|
||||||
|
console.log(match);
|
||||||
|
return {
|
||||||
|
type: 'internal-link',
|
||||||
|
raw: match[0],
|
||||||
|
text: match[1].trim()
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default [InternalLinkExtension];
|
@ -3,7 +3,6 @@
|
|||||||
// import { } from 'svelte-markdown';
|
// import { } from 'svelte-markdown';
|
||||||
export let depth: number;
|
export let depth: number;
|
||||||
export let raw: string;
|
export let raw: string;
|
||||||
export let text: string;
|
|
||||||
|
|
||||||
// const { slug, getOptions } = getContext(key);
|
// const { slug, getOptions } = getContext(key);
|
||||||
// const options = getOptions();
|
// const options = getOptions();
|
9
webapp/src/lib/marked/renderers/InternalLink.svelte
Normal file
9
webapp/src/lib/marked/renderers/InternalLink.svelte
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import Link from 'svelte-icons/io/IoIosLink.svelte';
|
||||||
|
|
||||||
|
export let text: string;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<span class="text-blue-400 underline cursor-not-allowed">
|
||||||
|
<dfn class="not-italic" title="Internal links are not shared."> {text}</dfn></span
|
||||||
|
>
|
17
webapp/src/lib/marked/tokenizer.ts
Normal file
17
webapp/src/lib/marked/tokenizer.ts
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
// Override function
|
||||||
|
const tokenizer = {
|
||||||
|
// Obsidian [[internal links]]
|
||||||
|
link(src: string) {
|
||||||
|
const match = src.match(/\[\[([^\n]+?)]\]/);
|
||||||
|
if (match) {
|
||||||
|
return {
|
||||||
|
type: 'internal-link',
|
||||||
|
raw: match[0],
|
||||||
|
text: match[1].trim()
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default tokenizer;
|
@ -30,11 +30,8 @@
|
|||||||
if (browser) {
|
if (browser) {
|
||||||
// Decrypt note
|
// Decrypt note
|
||||||
const key = location.hash.slice(1);
|
const key = location.hash.slice(1);
|
||||||
const start = performance.now();
|
|
||||||
plaintext = decrypt({ ...note, key });
|
plaintext = decrypt({ ...note, key });
|
||||||
console.log(performance.now() - start);
|
|
||||||
}
|
}
|
||||||
console.log(note.insert_time);
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user