NextGraph
/
nextgraph-rs
1
2
Fork 0
Code Issues 1 Pull Requests Packages Projects 2 Releases 3 Activity

more plugins for MilkDown and CSS for all

Browse Source
master
Niko PLP 1 month ago
parent f289170e74
commit fa0102f1f4
11 changed files with 521 additions and 108 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 12
      ng-app/package.json
  2. 40
      ng-app/src/apps/MilkDownEditor.svelte
  3. 41
      ng-app/src/apps/PostMdViewer.svelte
  4. 2
      ng-app/src/apps/ProseMirrorEditor.svelte
  5. 2
      ng-app/src/apps/ProseMirrorViewer.svelte
  6. 15
      ng-app/src/lib/Document.svelte
  7. 41
      ng-app/src/styles.css
  8. 1
      ng-app/src/zeras.ts
  9. 3
      ng-app/tailwind.config.cjs
  10. 4
      ng-app/vite.config.ts
  11. 468
      pnpm-lock.yaml

12
ng-app/package.json
Unescape View File

@ -36,30 +36,42 @@
"@milkdown/core": "^7.4.0", "@milkdown/core": "^7.4.0",
"@milkdown/ctx": "^7.2.0", "@milkdown/ctx": "^7.2.0",
"@milkdown/plugin-collab": "^7.4.0", "@milkdown/plugin-collab": "^7.4.0",
"@milkdown/plugin-emoji": "^7.4.0",
"@milkdown/plugin-indent": "^7.4.0",
"@milkdown/plugin-math": "^7.4.0",
"@milkdown/plugin-prism": "^7.4.0",
"@milkdown/plugin-slash": "^7.4.0", "@milkdown/plugin-slash": "^7.4.0",
"@milkdown/preset-commonmark": "^7.4.0", "@milkdown/preset-commonmark": "^7.4.0",
"@milkdown/preset-gfm": "^7.4.0", "@milkdown/preset-gfm": "^7.4.0",
"@milkdown/prose": "^7.2.0", "@milkdown/prose": "^7.2.0",
"@milkdown/theme-nord": "^7.4.0", "@milkdown/theme-nord": "^7.4.0",
"@milkdown/transformer": "^7.2.0", "@milkdown/transformer": "^7.2.0",
"@milkdown/utils": "^7.4.0",
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"@replit/codemirror-lang-svelte": "^6.0.0", "@replit/codemirror-lang-svelte": "^6.0.0",
"@sindresorhus/is": "4.6.0",
"@tailwindcss/typography": "^0.5.13",
"@tauri-apps/api": "2.0.0-alpha.8", "@tauri-apps/api": "2.0.0-alpha.8",
"@tauri-apps/plugin-barcode-scanner": "2.0.0-alpha.0", "@tauri-apps/plugin-barcode-scanner": "2.0.0-alpha.0",
"@tauri-apps/plugin-window": "2.0.0-alpha.1", "@tauri-apps/plugin-window": "2.0.0-alpha.1",
"async-proxy": "^0.4.1", "async-proxy": "^0.4.1",
"char-regex": "1.0.2",
"classnames": "^2.3.2", "classnames": "^2.3.2",
"codemirror": "^6.0.1", "codemirror": "^6.0.1",
"emojilib": "2.4.0",
"extend": "3.0.2", "extend": "3.0.2",
"flowbite": "^1.6.5", "flowbite": "^1.6.5",
"flowbite-svelte": "^0.43.3", "flowbite-svelte": "^0.43.3",
"html5-qrcode": "^2.3.8", "html5-qrcode": "^2.3.8",
"katex": "^0.16.11",
"lodash.debounce": "4.0.8", "lodash.debounce": "4.0.8",
"ng-sdk-js": "workspace:^0.1.0-preview.1", "ng-sdk-js": "workspace:^0.1.0-preview.1",
"prism-themes": "^1.9.0",
"prosemirror-model": "^1.7.1", "prosemirror-model": "^1.7.1",
"prosemirror-state": "^1.2.3", "prosemirror-state": "^1.2.3",
"prosemirror-svelte": "^0.2.4", "prosemirror-svelte": "^0.2.4",
"prosemirror-view": "^1.9.10", "prosemirror-view": "^1.9.10",
"skin-tone": "2.0.0",
"style-mod": "^4.1.2", "style-mod": "^4.1.2",
"svelte-codemirror-editor": "^1.4.0", "svelte-codemirror-editor": "^1.4.0",
"svelte-i18n": "^4.0.0", "svelte-i18n": "^4.0.0",

40
ng-app/src/apps/MilkDownEditor.svelte
Unescape View File

@ -45,12 +45,36 @@
import { placeholder, placeholderCtx } from './milkdown-placeholder' import { placeholder, placeholderCtx } from './milkdown-placeholder'
import { splitEditing, toggleSplitEditing } from '@milkdown-lab/plugin-split-editing' import { splitEditing, toggleSplitEditing } from '@milkdown-lab/plugin-split-editing'
import { SlashProvider, slashFactory } from '@milkdown/plugin-slash' import { SlashProvider, slashFactory } from '@milkdown/plugin-slash'
import { callCommand } from '@milkdown/utils';
import { emoji } from '@milkdown/plugin-emoji';
import { math } from '@milkdown/plugin-math';
import 'katex/dist/katex.min.css';
import { indent } from '@milkdown/plugin-indent';
import { prism } from '@milkdown/plugin-prism';
import 'prism-themes/themes/prism-nord.css'
export let commits = {}; export let commits = {};
const ydoc = new Y.Doc() const ydoc = new Y.Doc()
let editor; let editor;
let width;
let split = true;
function width_changed() {
if (!editor) return;
if (width < 768 && split) {
console.log("toggle down")
split = false;
editor.action(callCommand(toggleSplitEditing.key, true));
} else if (width >= 768 && !split) {
split = true;
console.log("toggle up")
editor.action(callCommand(toggleSplitEditing.key, false));
}
}
$: width, width_changed();
function slashPluginView(view) { function slashPluginView(view) {
const content = document.createElement('div'); const content = document.createElement('div');
@ -79,7 +103,17 @@
ctx.set(slash.key, { ctx.set(slash.key, {
view: slashPluginView view: slashPluginView
}) })
}).use(slash).config(nord).use(commonmark).use(gfm).use(placeholder).use(splitEditing).use(collab).create(); }).use(slash)
.config(nord)
.use(commonmark)
.use(gfm)
.use(prism)
.use(indent)
.use(math)
.use(emoji)
.use(placeholder)
.use(splitEditing)
.use(collab).create();
ydoc.on('update', async (update, origin) => { ydoc.on('update', async (update, origin) => {
//console.log(update,origin); //console.log(update,origin);
@ -124,8 +158,8 @@
editor.action((ctx) => { editor.action((ctx) => {
const editorView = ctx.get(editorViewCtx) const editorView = ctx.get(editorViewCtx)
editorView.focus(); editorView.focus();
//toggleSplitEditing(ctx);
}); });
width_changed();
} }
onMount(async ()=>{ onMount(async ()=>{
@ -141,7 +175,7 @@
</script> </script>
<div class="grow p-5 post-rich-text" style="min-height:300px;"> <div class="grow p-5 post-rich-text" style="min-height:300px;" bind:clientWidth={width}>
<div id="mdeditor" class="prosemirror-editor"></div> <div id="mdeditor" class="prosemirror-editor"></div>
</div> </div>

41
ng-app/src/apps/PostMdViewer.svelte
Unescape View File

@ -26,9 +26,11 @@
import { import {
cur_tab_register_on_save, cur_tab_register_on_save,
cur_tab_deregister_on_save, cur_tab_deregister_on_save,
cur_tab_branch_class cur_tab_branch_class,
set_view_or_edit
} from "../tab"; } from "../tab";
import { t } from "svelte-i18n"; import { t } from "svelte-i18n";
import{ PencilSquare } from "svelte-heros-v2";
import * as Y from 'yjs' import * as Y from 'yjs'
@ -38,12 +40,20 @@
import { nord } from '@milkdown/theme-nord'; import { nord } from '@milkdown/theme-nord';
import '@milkdown/theme-nord/style.css'; import '@milkdown/theme-nord/style.css';
import { collab, collabServiceCtx } from '@milkdown/plugin-collab'; import { collab, collabServiceCtx } from '@milkdown/plugin-collab';
import "svelte-highlight/styles/github.css";
import { emoji } from '@milkdown/plugin-emoji';
import { math } from '@milkdown/plugin-math';
import 'katex/dist/katex.min.css';
import { indent } from '@milkdown/plugin-indent';
import { prism } from '@milkdown/plugin-prism';
import 'prism-themes/themes/prism-nord.css'
export let commits = {}; export let commits = {};
const ydoc = new Y.Doc() const ydoc = new Y.Doc()
let editor; let editor;
let has_content = false;
async function setup() { async function setup() {
editor = await Editor.make().config((ctx) => { editor = await Editor.make().config((ctx) => {
@ -52,7 +62,15 @@
...prev, ...prev,
editable:() => false, editable:() => false,
})) }))
}).config(nord).use(commonmark).use(gfm).use(collab).create(); }).config(nord)
.use(commonmark)
.use(gfm)
.use(prism)
.use(indent)
.use(math)
.use(emoji)
.use(collab)
.create();
ydoc.on('destroy', async () => { ydoc.on('destroy', async () => {
commits.discrete?.deregisterOnUpdate(); commits.discrete?.deregisterOnUpdate();
@ -70,9 +88,11 @@
let history = commits.discrete?.registerOnUpdate((update) => { let history = commits.discrete?.registerOnUpdate((update) => {
Y.applyUpdate(ydoc, update.YXml, {local:true}) Y.applyUpdate(ydoc, update.YXml, {local:true})
has_content = true;
}); });
for (const h of history) { for (const h of history) {
Y.applyUpdate(ydoc, h.YXml, {local:true}) Y.applyUpdate(ydoc, h.YXml, {local:true})
has_content = true;
} }
} }
@ -86,9 +106,24 @@
await editor.destroy(); await editor.destroy();
}); });
const edit = () => {
set_view_or_edit(false);
}
</script> </script>
<div class="grow p-5 post-rich-text"> {#if !has_content}
<button
on:click={edit}
on:keypress={edit}
class="select-none mb-10 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-500/50 rounded-lg text-base p-2 text-center inline-flex items-center dark:focus:ring-primary-700/55"
>
<PencilSquare tabindex="-1" class="mr-2 focus:outline-none" />
{$t("doc.start_editing")}
</button>
{/if}
<div class="grow p-5 post-rich-text prose">
<div id="mdeditor" class="prosemirror-editor"></div> <div id="mdeditor" class="prosemirror-editor"></div>
</div> </div>

2
ng-app/src/apps/ProseMirrorEditor.svelte
Unescape View File

@ -93,7 +93,7 @@
}); });
</script> </script>
<div class="grow p-5 post-rich-text" style="min-height:300px;"> <div class="grow p-5 post-rich-text prose" style="min-height:300px;">
<ProsemirrorEditor <ProsemirrorEditor
className="prosemirror-editor" className="prosemirror-editor"
{editorState} {editorState}

2
ng-app/src/apps/ProseMirrorViewer.svelte
Unescape View File

@ -71,7 +71,7 @@
{#if source} {#if source}
<div class="post-rich-text"> <div class="post-rich-text prose">
{@html source} {@html source}
</div> </div>

15
ng-app/src/lib/Document.svelte
Unescape View File

@ -31,6 +31,9 @@
let width; let width;
let center;
$: center = width > 1024 && !$cur_app?.full_width
let commits; let commits;
// TODO deals with cases when nuri has :r :w :l (remove them from nuri that should only have :o:v format , and add them in cur_tab) // TODO deals with cases when nuri has :r :w :l (remove them from nuri that should only have :o:v format , and add them in cur_tab)
$: commits = $active_session && nuri && branch_subscribe(nuri, true); $: commits = $active_session && nuri && branch_subscribe(nuri, true);
@ -52,16 +55,16 @@
</Alert> </Alert>
</div> </div>
{:else} {:else}
<div class="flex justify-left" class:justify-center={width>1024} use:inview={inview_options} on:inview_change={(event) => { <div class="flex justify-left" class:justify-center={center} use:inview={inview_options} on:inview_change={(event) => {
const { inView, entry, scrollDirection, observer, node} = event.detail; const { inView, entry, scrollDirection, observer, node} = event.detail;
if ($cur_branch) { set_header_in_view(inView); } if ($cur_branch) { set_header_in_view(inView); }
if (inView) nav_bar_reset_newest(); if (inView) nav_bar_reset_newest();
}}> }}>
<div class="flex flex-col grow"> <div class="flex flex-col" class:grow={width<=1024 || $cur_app?.full_width}>
{#if $can_have_header} {#if $can_have_header}
<div class="flex p-4 max-w-screen-lg justify-start flex-wrap" class:w-[1024px]={width>1024} > <div class:max-w-screen-lg={center} class="flex p-4 justify-start flex-wrap" class:w-[1024px]={center} >
{#if $header_icon} {#if $header_icon}
<NavIcon img={$header_icon} config={{ <NavIcon img={$header_icon} config={{
tabindex:"-1", tabindex:"-1",
@ -80,21 +83,21 @@
{/if} {/if}
</div> </div>
{#if $header_description} {#if $header_description}
<div class="flex p-4 max-w-screen-lg text-left text-gray-600 dark:text-white" class:w-[1024px]={width>1024}> <div class:max-w-screen-lg={center} class="flex p-4 text-left text-gray-600 dark:text-white" class:w-[1024px]={center}>
{$header_description} {$header_description}
</div> </div>
{/if} {/if}
{/if} {/if}
{#if commits} {#if commits}
{#await commits.load()} {#await commits.load()}
<div class="row p-4 max-w-screen-lg text-gray-600" class:w-[1024px]={width>1024}> <div class:max-w-screen-lg={center} class="row p-4 text-gray-600" class:w-[1024px]={center}>
<p>{$t("connectivity.loading")}...</p> <p>{$t("connectivity.loading")}...</p>
</div> </div>
{:then} {:then}
{#if $cur_app} {#if $cur_app}
{#await load_official_app($cur_app) then app} {#await load_official_app($cur_app) then app}
<div class="flex max-w-screen-lg" style="overflow-wrap: anywhere;" class:w-[1024px]={width>1024} > <div class:max-w-screen-lg={center} class="flex" style="overflow-wrap: anywhere;" class:w-[1024px]={center} >
<svelte:component this={app} commits={$commits}/> <svelte:component this={app} commits={$commits}/>
</div> </div>
{/await} {/await}

41
ng-app/src/styles.css
Unescape View File

@ -59,35 +59,52 @@ td.hljs {
outline-offset: 2px; outline-offset: 2px;
} }
.post-rich-text em { .post-rich-text em,
.prose em {
font-style: italic; font-style: italic;
font-family: Verdana, Arial, sans-serif; font-family: Verdana, Arial, sans-serif;
} }
/*
.post-rich-text h1 { .post-rich-text h1 {
font-size: 2.5rem /* 24px */; font-size: 2.5rem;
line-height: 4rem /* 32px */; line-height: 4rem;
} }
.post-rich-text h2 { .post-rich-text h2 {
font-size: 2rem /* 20px */; font-size: 2rem;
line-height: 3rem /* 28px */; line-height: 3rem;
} }
.post-rich-text h3 { .post-rich-text h3 {
font-size: 1.5rem /* 18px */; font-size: 1.5rem;
line-height: 2.5rem /* 28px */; line-height: 2.5rem;
} }
.post-rich-text h4 { .post-rich-text h4 {
font-size: 1.25rem /* 18px */; font-size: 1.25rem;
line-height: 2rem /* 28px */; line-height: 2rem;
font-weight: 700; font-weight: 700;
} }
.post-rich-text h5 { .post-rich-text h5 {
font-size: 1.125rem /* 18px */; font-size: 1.125rem;
line-height: 2rem /* 28px */; line-height: 2rem;
} */
.prose {
max-width: 100%;
}
.prose .emoji {
width: 25px;
}
.prose li p,
.prose dd p {
margin: 0;
}
.prose table {
width: calc(100% - 32px) !important;
} }
.menu-bg-modal + div { .menu-bg-modal + div {

1
ng-app/src/zeras.ts
Unescape View File

@ -224,6 +224,7 @@ export const official_apps = {
"ng:b": "MilkDownEditor", "ng:b": "MilkDownEditor",
"ng:o": [], "ng:o": [],
"ng:w": ["post:md"], "ng:w": ["post:md"],
"full_width": true,
}, },
"n:g:z:code_editor": { "n:g:z:code_editor": {
"ng:n": "Text Editor", "ng:n": "Text Editor",

3
ng-app/tailwind.config.cjs
Unescape View File

@ -28,7 +28,8 @@ const config = {
}, },
plugins: [ plugins: [
require('flowbite/plugin') require('flowbite/plugin'),
require('@tailwindcss/typography')
], ],
darkMode: 'class', darkMode: 'class',
}; };

4
ng-app/vite.config.ts
Unescape View File

@ -17,8 +17,8 @@ export default defineConfig(async () => {
"prosemirror-svelte", "prosemirror-svelte/state", "prosemirror-svelte/helpers", "y-prosemirror", "prosemirror-state", "prosemirror-model", "prosemirror-view", "y-protocols", "prosemirror-svelte", "prosemirror-svelte/state", "prosemirror-svelte/helpers", "y-prosemirror", "prosemirror-state", "prosemirror-model", "prosemirror-view", "y-protocols",
"@milkdown/core", "@milkdown/ctx", "@milkdown/prose", "@milkdown/transformer", "@milkdown/preset-commonmark", "@milkdown/theme-nord", "@milkdown/plugin-collab", "@milkdown/core", "@milkdown/ctx", "@milkdown/prose", "@milkdown/transformer", "@milkdown/preset-commonmark", "@milkdown/theme-nord", "@milkdown/plugin-collab",
"svelte-highlight", "svelte-highlight/languages/typescript", "svelte-highlight/languages/javascript", "svelte-highlight/languages/rust", "@milkdown/preset-gfm", "svelte-highlight", "svelte-highlight/languages/typescript", "svelte-highlight/languages/javascript", "svelte-highlight/languages/rust", "@milkdown/preset-gfm",
"@milkdown-lab/plugin-split-editing", "@milkdown/plugin-slash"], "@milkdown-lab/plugin-split-editing", "@milkdown/plugin-slash", "@milkdown/utils", "@milkdown/plugin-prism", "@milkdown/plugin-emoji", "@milkdown/plugin-math", "@milkdown/plugin-indent"],
include: ["debug","extend","highlight.js","highlight.js/lib/core","lodash.debounce"] include: ["debug","extend","highlight.js","highlight.js/lib/core","lodash.debounce","@sindresorhus/is","char-regex","emojilib","skin-tone"]
}, },
worker: { worker: {
format: 'es', format: 'es',

468
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save