parent
0a5c03ebd1
commit
f289170e74
@ -0,0 +1,147 @@ |
|||||||
|
<!-- |
||||||
|
// Copyright (c) 2022-2024 Niko Bonnieure, Par le Peuple, NextGraph.org developers |
||||||
|
// All rights reserved. |
||||||
|
// Licensed under the Apache License, Version 2.0 |
||||||
|
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0> |
||||||
|
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>, |
||||||
|
// at your option. All files in the project carrying such |
||||||
|
// notice may not be copied, modified, or distributed except |
||||||
|
// according to those terms. |
||||||
|
--> |
||||||
|
|
||||||
|
<!-- |
||||||
|
TODO: |
||||||
|
https://github.com/Milkdown/milkdown/tree/main/packages/components/src |
||||||
|
https://milkdown-storybook.vercel.app/?path=/story/components-image-block--empty |
||||||
|
https://github.com/Milkdown/milkdown/tree/main/packages/crepe |
||||||
|
https://milkdown-storybook.vercel.app/?path=/story/crepe-crepe--empty |
||||||
|
--> |
||||||
|
|
||||||
|
<script lang="ts"> |
||||||
|
import { onMount, tick, onDestroy } from "svelte"; |
||||||
|
import { |
||||||
|
toast_error, |
||||||
|
toast_success, |
||||||
|
reset_toasts, |
||||||
|
display_error, |
||||||
|
live_discrete_update, |
||||||
|
discrete_update |
||||||
|
} from "../store"; |
||||||
|
import { |
||||||
|
cur_tab_register_on_save, |
||||||
|
cur_tab_deregister_on_save, |
||||||
|
cur_tab_branch_class |
||||||
|
} from "../tab"; |
||||||
|
import { t } from "svelte-i18n"; |
||||||
|
|
||||||
|
import * as Y from 'yjs' |
||||||
|
|
||||||
|
import { Editor, rootCtx, editorViewCtx } from '@milkdown/core'; |
||||||
|
import { commonmark } from '@milkdown/preset-commonmark'; |
||||||
|
import { gfm } from '@milkdown/preset-gfm' |
||||||
|
import { nord } from '@milkdown/theme-nord'; |
||||||
|
import '@milkdown/theme-nord/style.css'; |
||||||
|
import { collab, collabServiceCtx } from '@milkdown/plugin-collab'; |
||||||
|
import { placeholder, placeholderCtx } from './milkdown-placeholder' |
||||||
|
import { splitEditing, toggleSplitEditing } from '@milkdown-lab/plugin-split-editing' |
||||||
|
import { SlashProvider, slashFactory } from '@milkdown/plugin-slash' |
||||||
|
|
||||||
|
export let commits = {}; |
||||||
|
|
||||||
|
const ydoc = new Y.Doc() |
||||||
|
|
||||||
|
let editor; |
||||||
|
|
||||||
|
function slashPluginView(view) { |
||||||
|
const content = document.createElement('div'); |
||||||
|
|
||||||
|
const provider = new SlashProvider({ |
||||||
|
content, |
||||||
|
}); |
||||||
|
|
||||||
|
return { |
||||||
|
update: (updatedView, prevState) => { |
||||||
|
provider.update(updatedView, prevState); |
||||||
|
}, |
||||||
|
destroy: () => { |
||||||
|
provider.destroy(); |
||||||
|
content.remove(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const slash = slashFactory('my-slash'); |
||||||
|
|
||||||
|
async function setup() { |
||||||
|
editor = await Editor.make().config((ctx) => { |
||||||
|
ctx.set(rootCtx, '#mdeditor') |
||||||
|
ctx.set(placeholderCtx, $t("doc.type_your_text_here")) |
||||||
|
ctx.set(slash.key, { |
||||||
|
view: slashPluginView |
||||||
|
}) |
||||||
|
}).use(slash).config(nord).use(commonmark).use(gfm).use(placeholder).use(splitEditing).use(collab).create(); |
||||||
|
|
||||||
|
ydoc.on('update', async (update, origin) => { |
||||||
|
//console.log(update,origin); |
||||||
|
if (!origin.local) { |
||||||
|
try { |
||||||
|
await discrete_update(update, "YXml", commits.heads); |
||||||
|
} catch (e){ |
||||||
|
toast_error(display_error(e)); |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
ydoc.on('destroy', async () => { |
||||||
|
commits.discrete?.deregisterOnUpdate(); |
||||||
|
await cur_tab_deregister_on_save(); |
||||||
|
}) |
||||||
|
|
||||||
|
editor.action((ctx) => { |
||||||
|
const collabService = ctx.get(collabServiceCtx); |
||||||
|
|
||||||
|
collabService |
||||||
|
// bind doc |
||||||
|
.bindDoc(ydoc) |
||||||
|
// connect yjs with milkdown |
||||||
|
.connect(); |
||||||
|
}); |
||||||
|
|
||||||
|
cur_tab_register_on_save(async (updates)=>{ |
||||||
|
|
||||||
|
let update = Y.mergeUpdates(updates); |
||||||
|
await live_discrete_update(update, "YXml", commits.heads); |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
let history = commits.discrete?.registerOnUpdate((update) => { |
||||||
|
Y.applyUpdate(ydoc, update.YXml, {local:true}) |
||||||
|
}); |
||||||
|
for (const h of history) { |
||||||
|
Y.applyUpdate(ydoc, h.YXml, {local:true}) |
||||||
|
} |
||||||
|
await tick(); |
||||||
|
editor.action((ctx) => { |
||||||
|
const editorView = ctx.get(editorViewCtx) |
||||||
|
editorView.focus(); |
||||||
|
//toggleSplitEditing(ctx); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
onMount(async ()=>{ |
||||||
|
|
||||||
|
await setup(); |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
onDestroy(async ()=>{ |
||||||
|
ydoc.destroy(); |
||||||
|
if (editor) await editor.destroy(); |
||||||
|
}); |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<div class="grow p-5 post-rich-text" style="min-height:300px;"> |
||||||
|
<div id="mdeditor" class="prosemirror-editor"></div> |
||||||
|
</div> |
||||||
|
|
||||||
@ -0,0 +1,94 @@ |
|||||||
|
<!-- |
||||||
|
// Copyright (c) 2022-2024 Niko Bonnieure, Par le Peuple, NextGraph.org developers |
||||||
|
// All rights reserved. |
||||||
|
// Licensed under the Apache License, Version 2.0 |
||||||
|
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0> |
||||||
|
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>, |
||||||
|
// at your option. All files in the project carrying such |
||||||
|
// notice may not be copied, modified, or distributed except |
||||||
|
// according to those terms. |
||||||
|
--> |
||||||
|
|
||||||
|
<!-- |
||||||
|
We could maybe also use https://ssssota.github.io/svelte-exmarkdown/ for rendering the MD (but to obtain the MD, we need to instantiate Milkdown anyway) |
||||||
|
--> |
||||||
|
|
||||||
|
<script lang="ts"> |
||||||
|
import { onMount, tick, onDestroy } from "svelte"; |
||||||
|
import { |
||||||
|
toast_error, |
||||||
|
toast_success, |
||||||
|
reset_toasts, |
||||||
|
display_error, |
||||||
|
live_discrete_update, |
||||||
|
discrete_update |
||||||
|
} from "../store"; |
||||||
|
import { |
||||||
|
cur_tab_register_on_save, |
||||||
|
cur_tab_deregister_on_save, |
||||||
|
cur_tab_branch_class |
||||||
|
} from "../tab"; |
||||||
|
import { t } from "svelte-i18n"; |
||||||
|
|
||||||
|
import * as Y from 'yjs' |
||||||
|
|
||||||
|
import { Editor, rootCtx, editorViewOptionsCtx } from '@milkdown/core'; |
||||||
|
import { commonmark } from '@milkdown/preset-commonmark'; |
||||||
|
import { gfm } from '@milkdown/preset-gfm' |
||||||
|
import { nord } from '@milkdown/theme-nord'; |
||||||
|
import '@milkdown/theme-nord/style.css'; |
||||||
|
import { collab, collabServiceCtx } from '@milkdown/plugin-collab'; |
||||||
|
|
||||||
|
export let commits = {}; |
||||||
|
|
||||||
|
const ydoc = new Y.Doc() |
||||||
|
|
||||||
|
let editor; |
||||||
|
|
||||||
|
async function setup() { |
||||||
|
editor = await Editor.make().config((ctx) => { |
||||||
|
ctx.set(rootCtx, '#mdeditor') |
||||||
|
ctx.update(editorViewOptionsCtx, (prev) => ({ |
||||||
|
...prev, |
||||||
|
editable:() => false, |
||||||
|
})) |
||||||
|
}).config(nord).use(commonmark).use(gfm).use(collab).create(); |
||||||
|
|
||||||
|
ydoc.on('destroy', async () => { |
||||||
|
commits.discrete?.deregisterOnUpdate(); |
||||||
|
}) |
||||||
|
|
||||||
|
editor.action((ctx) => { |
||||||
|
const collabService = ctx.get(collabServiceCtx); |
||||||
|
|
||||||
|
collabService |
||||||
|
// bind doc and awareness |
||||||
|
.bindDoc(ydoc) |
||||||
|
// connect yjs with milkdown |
||||||
|
.connect(); |
||||||
|
}); |
||||||
|
|
||||||
|
let history = commits.discrete?.registerOnUpdate((update) => { |
||||||
|
Y.applyUpdate(ydoc, update.YXml, {local:true}) |
||||||
|
}); |
||||||
|
for (const h of history) { |
||||||
|
Y.applyUpdate(ydoc, h.YXml, {local:true}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
onMount(async ()=>{ |
||||||
|
await setup(); |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
onDestroy(async ()=>{ |
||||||
|
ydoc.destroy(); |
||||||
|
await editor.destroy(); |
||||||
|
}); |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<div class="grow p-5 post-rich-text"> |
||||||
|
<div id="mdeditor" class="prosemirror-editor"></div> |
||||||
|
</div> |
||||||
|
|
||||||
@ -0,0 +1,102 @@ |
|||||||
|
/** |
||||||
|
MIT License |
||||||
|
|
||||||
|
Copyright (c) 2022 Mox |
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||||
|
of this software and associated documentation files (the "Software"), to deal |
||||||
|
in the Software without restriction, including without limitation the rights |
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||||
|
copies of the Software, and to permit persons to whom the Software is |
||||||
|
furnished to do so, subject to the following conditions: |
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all |
||||||
|
copies or substantial portions of the Software. |
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||||
|
SOFTWARE. |
||||||
|
|
||||||
|
Source: https://github.com/HexMox/milkdown-plugin-placeholder
|
||||||
|
*/ |
||||||
|
|
||||||
|
import type { MilkdownPlugin, TimerType } from '@milkdown/ctx' |
||||||
|
import type { EditorView } from '@milkdown/prose/view' |
||||||
|
import { createSlice, createTimer } from '@milkdown/ctx' |
||||||
|
import { InitReady, prosePluginsCtx } from '@milkdown/core' |
||||||
|
import { Plugin, PluginKey } from '@milkdown/prose/state' |
||||||
|
|
||||||
|
export const placeholderCtx = createSlice('Please input here...', 'placeholder') |
||||||
|
export const placeholderTimerCtx = createSlice([] as TimerType[], 'editorStateTimer') |
||||||
|
|
||||||
|
export const PlaceholderReady = createTimer('PlaceholderReady') |
||||||
|
|
||||||
|
const key = new PluginKey('MILKDOWN_PLACEHOLDER') |
||||||
|
|
||||||
|
export const placeholder: MilkdownPlugin = (ctx) => { |
||||||
|
ctx.inject(placeholderCtx).inject(placeholderTimerCtx, [InitReady]).record(PlaceholderReady) |
||||||
|
|
||||||
|
return async () => { |
||||||
|
await ctx.waitTimers(placeholderTimerCtx) |
||||||
|
|
||||||
|
const prosePlugins = ctx.get(prosePluginsCtx) |
||||||
|
|
||||||
|
const update = (view: EditorView) => { |
||||||
|
const placeholder = ctx.get(placeholderCtx) |
||||||
|
const doc = view.state.doc |
||||||
|
if ( |
||||||
|
view.editable && |
||||||
|
doc.childCount === 1 && |
||||||
|
doc.firstChild?.isTextblock && |
||||||
|
doc.firstChild?.content.size === 0 && |
||||||
|
doc.firstChild?.type.name === 'paragraph' |
||||||
|
) { |
||||||
|
view.dom.classList.add('editor_empty'); |
||||||
|
view.dom.setAttribute('data-placeholder', placeholder); |
||||||
|
} else { |
||||||
|
view.dom.classList.remove('editor_empty'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const plugins = [ |
||||||
|
...prosePlugins, |
||||||
|
new Plugin({ |
||||||
|
key, |
||||||
|
// props: {
|
||||||
|
// decorations(state) {
|
||||||
|
// const doc = state.doc
|
||||||
|
// if (
|
||||||
|
// doc.childCount === 1 &&
|
||||||
|
// doc.firstChild?.isTextblock &&
|
||||||
|
// doc.firstChild?.content.size === 0
|
||||||
|
// ) {
|
||||||
|
// return DecorationSet.create(doc, [
|
||||||
|
// Decoration.widget(1, (view) => {
|
||||||
|
// if (view.editable) {
|
||||||
|
// const span = document.createElement('span')
|
||||||
|
// span.classList.add('placeholder')
|
||||||
|
// span.textContent = placeholder
|
||||||
|
// return span
|
||||||
|
// }
|
||||||
|
// }),
|
||||||
|
// ])
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
view(view) { |
||||||
|
update(view) |
||||||
|
|
||||||
|
return { update } |
||||||
|
}, |
||||||
|
}), |
||||||
|
] |
||||||
|
|
||||||
|
ctx.set(prosePluginsCtx, plugins) |
||||||
|
|
||||||
|
ctx.done(PlaceholderReady) |
||||||
|
} |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue