mirror of
https://codeberg.org/Sevichecc/Seigwai.git
synced 2025-06-17 16:59:14 +08:00
Compare commits
7 commits
cd787f3953
...
3544b30b60
Author | SHA1 | Date | |
---|---|---|---|
3544b30b60 | |||
d8f5a3d553 | |||
dcfc0717b0 | |||
35a79a2e43 | |||
1d31d4e540 | |||
1ae12e6bf5 | |||
|
8bfa655af5 |
25 changed files with 1109 additions and 1718 deletions
3
.eslintrc
Normal file
3
.eslintrc
Normal file
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"extends": "@antfu"
|
||||
}
|
|
@ -1,15 +0,0 @@
|
|||
/* eslint-env node */
|
||||
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: [
|
||||
'@antfu',
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended',
|
||||
'@vue/eslint-config-typescript',
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
},
|
||||
}
|
35
package.json
35
package.json
|
@ -6,26 +6,37 @@
|
|||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint .",
|
||||
"lint:fix": "eslint . --fix"
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@blocknote/core": "^0.4.5",
|
||||
"@tiptap/vue-3": "2.0.0-beta.220",
|
||||
"@milkdown/core": "^7.1.0",
|
||||
"@milkdown/ctx": "^7.1.0",
|
||||
"@milkdown/plugin-block": "^7.1.0",
|
||||
"@milkdown/plugin-clipboard": "^7.1.0",
|
||||
"@milkdown/plugin-cursor": "^7.1.0",
|
||||
"@milkdown/plugin-emoji": "^7.1.0",
|
||||
"@milkdown/plugin-history": "^7.1.0",
|
||||
"@milkdown/plugin-indent": "^7.1.0",
|
||||
"@milkdown/plugin-math": "^7.1.0",
|
||||
"@milkdown/plugin-slash": "^7.1.0",
|
||||
"@milkdown/plugin-tooltip": "^7.1.0",
|
||||
"@milkdown/preset-commonmark": "^7.1.0",
|
||||
"@milkdown/preset-gfm": "^7.1.0",
|
||||
"@milkdown/prose": "^7.1.0",
|
||||
"@milkdown/theme-nord": "^7.1.0",
|
||||
"@milkdown/transformer": "^7.1.0",
|
||||
"@milkdown/utils": "^7.1.0",
|
||||
"@milkdown/vue": "^7.1.0",
|
||||
"@prosemirror-adapter/vue": "^0.2.2",
|
||||
"masto": "^5.10.0",
|
||||
"vue": "^3.2.47"
|
||||
"vue": "^3.2.45"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.2.0",
|
||||
"@types/node": "^18.14.2",
|
||||
"@vue/eslint-config-typescript": "^11.0.2",
|
||||
"@vue/tsconfig": "^0.1.3",
|
||||
"eslint-plugin-vue": "^9.9.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"@antfu/eslint-config": "^0.35.2",
|
||||
"@tailwindcss/typography": "^0.5.9",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"eslint": "^8.34.0",
|
||||
"tailwindcss": "^3.2.7",
|
||||
"typescript": "^4.9.5",
|
||||
"vite": "^4.1.0",
|
||||
"vue-tsc": "^1.0.24"
|
||||
|
|
1826
pnpm-lock.yaml
1826
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
6
postcss.config.cjs
Normal file
6
postcss.config.cjs
Normal file
|
@ -0,0 +1,6 @@
|
|||
/* Copyright 2021, Milkdown by Mirone. */
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
},
|
||||
}
|
29
src/App.vue
29
src/App.vue
|
@ -1,24 +1,13 @@
|
|||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import blocks from './blocks.json'
|
||||
import BlockNoteView from './components/BlockNoteView.vue'
|
||||
// TODO fix any
|
||||
const content = ref<any[]>(blocks)
|
||||
// const content: Block[] = ref(blocks) as Block[]
|
||||
<script setup lang="ts">
|
||||
import { MilkdownProvider } from '@milkdown/vue'
|
||||
import { ProsemirrorAdapterProvider } from '@prosemirror-adapter/vue'
|
||||
import Milkdown from './components/Milkdown/Editor.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BlockNoteView v-model="content">
|
||||
<template #BlockSideMenu-AddBlock="{ staticParams }">
|
||||
<button @click="staticParams.addBlock()">
|
||||
+
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<template #SlashMenuItem-Heading="{ menu, selected, onClick }">
|
||||
<button :style="selected && 'font-weight: bold;'" @click="onClick()">
|
||||
Slot {{ menu.name }}
|
||||
</button>
|
||||
</template>
|
||||
</BlockNoteView>
|
||||
<MilkdownProvider>
|
||||
<ProsemirrorAdapterProvider>
|
||||
<Milkdown />
|
||||
</ProsemirrorAdapterProvider>
|
||||
</MilkdownProvider>
|
||||
</template>
|
||||
|
|
128
src/blocks.json
128
src/blocks.json
|
@ -1,128 +0,0 @@
|
|||
[
|
||||
{
|
||||
"id": "53fa8b49-af0b-457e-9e1d-dd254215720f",
|
||||
"type": "paragraph",
|
||||
"props": {
|
||||
"textColor": "default",
|
||||
"backgroundColor": "default",
|
||||
"textAlignment": "left"
|
||||
},
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "Curabitur nisi.",
|
||||
"styles": {}
|
||||
}
|
||||
],
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"id": "aedd1f50-d699-4de1-9dd3-7841bc5f1fda",
|
||||
"type": "paragraph",
|
||||
"props": {
|
||||
"textColor": "default",
|
||||
"backgroundColor": "default",
|
||||
"textAlignment": "left"
|
||||
},
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "Vesatibulum ",
|
||||
"styles": {}
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": "rutrum",
|
||||
"styles": {
|
||||
"bold": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": ", mi nec ",
|
||||
"styles": {}
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": "elementum",
|
||||
"styles": {
|
||||
"italic": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": " vehicula, eros quam gravida nisl, id fringilla neque ante vel mi.",
|
||||
"styles": {}
|
||||
}
|
||||
],
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"id": "53f09254-e419-44ea-a497-7b1087763a27",
|
||||
"type": "paragraph",
|
||||
"props": {
|
||||
"textColor": "default",
|
||||
"backgroundColor": "default",
|
||||
"textAlignment": "left"
|
||||
},
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "Vestibulum ullamcorper mauris at ligula.",
|
||||
"styles": {}
|
||||
}
|
||||
],
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"id": "34df38b2-9c4b-4a0c-89fa-3bfa694d72ed",
|
||||
"type": "paragraph",
|
||||
"props": {
|
||||
"textColor": "default",
|
||||
"backgroundColor": "default",
|
||||
"textAlignment": "left"
|
||||
},
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "Maecenas vestibulum mollis diam.",
|
||||
"styles": {}
|
||||
}
|
||||
],
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"id": "485903b5-2cd7-4e44-b0ac-978ff2f4f5bd",
|
||||
"type": "paragraph",
|
||||
"props": {
|
||||
"textColor": "default",
|
||||
"backgroundColor": "default",
|
||||
"textAlignment": "left"
|
||||
},
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "Donec posuere vulputate arcu.",
|
||||
"styles": {}
|
||||
}
|
||||
],
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"id": "98a64490-e4d2-4928-9665-1efa7f32b3db",
|
||||
"type": "paragraph",
|
||||
"props": {
|
||||
"textColor": "default",
|
||||
"backgroundColor": "default",
|
||||
"textAlignment": "left"
|
||||
},
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "auie",
|
||||
"styles": {}
|
||||
}
|
||||
],
|
||||
"children": []
|
||||
}
|
||||
]
|
|
@ -1,53 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import type { ComponentInternalInstance } from 'vue'
|
||||
import { getCurrentInstance, onMounted, ref } from 'vue'
|
||||
import { BlockNoteEditor, defaultSlashMenuItems } from '@blocknote/core'
|
||||
import type { Block, BlockNoteEditorOptions } from '@blocknote/core'
|
||||
import { EditorContent } from '@tiptap/vue-3'
|
||||
import { slashMenuFactory } from './SlashMenu/slashMenuFactory'
|
||||
import { blockSideMenuFactory } from './BlockSideMenu/blockSideMenuFactory'
|
||||
const props = defineProps<{
|
||||
modelValue: Block[]
|
||||
options?: BlockNoteEditorOptions
|
||||
}>()
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', payload: Block[]): void
|
||||
}>()
|
||||
const component: ComponentInternalInstance = getCurrentInstance()!
|
||||
const editor = ref()
|
||||
onMounted(async () => {
|
||||
// Convert md to html
|
||||
const Editor = new BlockNoteEditor({})
|
||||
const content = await Editor.blocksToHTML(props.modelValue)
|
||||
const editor = new BlockNoteEditor({
|
||||
parentElement: document.getElementById('app')!,
|
||||
slashCommands: defaultSlashMenuItems,
|
||||
uiFactories: {
|
||||
// Create an example formatting toolbar which just consists of a bold toggle
|
||||
// formattingToolbarFactory,
|
||||
// // Create an example menu for hyperlinks
|
||||
// hyperlinkToolbarFactory,
|
||||
// Create an example menu for the /-menu
|
||||
slashMenuFactory: slashMenuFactory(component),
|
||||
// // Create an example menu for when a block is hovered
|
||||
blockSideMenuFactory: blockSideMenuFactory(component),
|
||||
},
|
||||
onEditorContentChange() {
|
||||
emit('update:modelValue', editor.topLevelBlocks)
|
||||
},
|
||||
editorDOMAttributes: {
|
||||
class: 'editor',
|
||||
},
|
||||
_tiptapOptions: {
|
||||
content,
|
||||
},
|
||||
})
|
||||
// console.log(editor)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<EditorContent :editor="editor?._tiptapEditor" />
|
||||
</div>
|
||||
</template>
|
|
@ -1,101 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
const props = defineProps<{
|
||||
staticParams?: any
|
||||
}>()
|
||||
function addBlock() {
|
||||
props.staticParams.addBlock()
|
||||
}
|
||||
function onDragStart(event: DragEvent) {
|
||||
props.staticParams.blockDragStart(event)
|
||||
}
|
||||
function onDragEnd(event: DragEvent) {
|
||||
props.staticParams.blockDragEnd(event)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<slot :static-params="staticParams">
|
||||
<slot name="BlockSideMenu-AddBlock" :static-params="staticParams">
|
||||
<button class="block-side-menu__button" @click="addBlock">
|
||||
<svg
|
||||
stroke="currentColor" fill="currentColor" stroke-width="0" t="1551322312294" viewBox="0 0 1024 1024"
|
||||
version="1.1" height="24" width="24" xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs />
|
||||
<path d="M474 152m8 0l60 0q8 0 8 8l0 704q0 8-8 8l-60 0q-8 0-8-8l0-704q0-8 8-8Z" />
|
||||
<path d="M168 474m8 0l672 0q8 0 8 8l0 60q0 8-8 8l-672 0q-8 0-8-8l0-60q0-8 8-8Z" />
|
||||
</svg>
|
||||
</button>
|
||||
</slot>
|
||||
|
||||
<slot name="BlockSideMenu-Drag" :static-params="staticParams">
|
||||
<button class="block-side-menu__button" draggable="true" @dragstart="onDragStart" @dragend="onDragEnd">
|
||||
<svg
|
||||
stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="24" width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path fill="none" d="M0 0h24v24H0V0z" />
|
||||
<path
|
||||
d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</slot>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.block-side-menu {
|
||||
position: absolute;
|
||||
display: none;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.block-side-menu>div {
|
||||
display: flex !important;
|
||||
flex-direction: row;
|
||||
}
|
||||
.ProseMirror {
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="postcss">
|
||||
.block-side-menu__button {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
font-family: Inter;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
color: rgb(194, 199, 208);
|
||||
position: relative;
|
||||
height: 24px;
|
||||
min-height: 24px;
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
border-radius: 4px;
|
||||
padding: 0px;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.block-side-menu__button:hover {
|
||||
background-color: rgb(246, 246, 248);
|
||||
}
|
||||
.block-side-menu__button:focus {
|
||||
outline-offset: 2px;
|
||||
outline: rgb(137, 147, 164) solid 2px;
|
||||
}
|
||||
button:focus:not(:focus-visible) {
|
||||
outline: none !important;
|
||||
}
|
||||
</style>
|
|
@ -1,48 +0,0 @@
|
|||
import type { BlockSideMenuFactory, BlockSideMenuStaticParams } from '@blocknote/core'
|
||||
import type { ComponentInternalInstance } from 'vue'
|
||||
import { mount } from '../../mount'
|
||||
|
||||
import BlockSideMenu from './BlockSideMenu.vue'
|
||||
|
||||
/**
|
||||
* This menu is drawn next to a block, when it's hovered over
|
||||
* It renders a drag handle and + button to create a new block
|
||||
*/
|
||||
export function blockSideMenuFactory(component: ComponentInternalInstance) {
|
||||
const blockSideMenuFactory: BlockSideMenuFactory = (staticParams: BlockSideMenuStaticParams) => {
|
||||
// Mount component
|
||||
// https://github.com/pearofducks/mount-vue-component/blob/master/index.js
|
||||
const { el } = mount(BlockSideMenu, {
|
||||
app: component.appContext.app,
|
||||
children: component.slots, // Pass all slots or filter for SideMenu ?
|
||||
props: {
|
||||
staticParams,
|
||||
},
|
||||
})
|
||||
el.classList.add('block-side-menu')
|
||||
document.body.appendChild(el)
|
||||
|
||||
// Mount component as a new instance
|
||||
// const container = document.createElement("div")
|
||||
// const instance = createApp(BlockSideMenu, {
|
||||
// staticParams
|
||||
// }).mount(container)
|
||||
// document.body.appendChild(el)
|
||||
|
||||
return {
|
||||
element: el,
|
||||
render: (params, isHidden) => {
|
||||
if (isHidden)
|
||||
el.style.display = 'block'
|
||||
|
||||
el.style.top = `${params.referenceRect.y}px`
|
||||
el.style.left = `${params.referenceRect.x - el.offsetWidth}px`
|
||||
},
|
||||
hide: () => {
|
||||
el.style.display = 'none'
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
return blockSideMenuFactory
|
||||
}
|
|
@ -1,53 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import type { ComponentInternalInstance } from "vue"
|
||||
import { onMounted, ref, useSlots, getCurrentInstance } from "vue"
|
||||
import { BlockNoteEditor, defaultSlashMenuItems } from "@blocknote/core"
|
||||
import type { BlockNoteEditorOptions, Block } from "@blocknote/core"
|
||||
import { EditorContent } from "@tiptap/vue-3"
|
||||
import { slashMenuFactory } from "@/SlashMenu/slashMenuFactory"
|
||||
import { blockSideMenuFactory } from "@/BlockSideMenu/blockSideMenuFactory"
|
||||
const props = defineProps<{
|
||||
modelValue: Block[]
|
||||
options?: BlockNoteEditorOptions
|
||||
}>()
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:modelValue', payload: Block[]): void
|
||||
}>()
|
||||
const component: ComponentInternalInstance = getCurrentInstance()!
|
||||
const editor = ref()
|
||||
onMounted(async () => {
|
||||
// Convert md to html
|
||||
const Editor = new BlockNoteEditor({})
|
||||
const content = await Editor.blocksToHTML(props.modelValue)
|
||||
const editor = new BlockNoteEditor({
|
||||
parentElement: document.getElementById("app")!,
|
||||
slashCommands: defaultSlashMenuItems,
|
||||
uiFactories: {
|
||||
// Create an example formatting toolbar which just consists of a bold toggle
|
||||
// formattingToolbarFactory,
|
||||
// // Create an example menu for hyperlinks
|
||||
// hyperlinkToolbarFactory,
|
||||
// Create an example menu for the /-menu
|
||||
slashMenuFactory: slashMenuFactory(component),
|
||||
// // Create an example menu for when a block is hovered
|
||||
blockSideMenuFactory: blockSideMenuFactory(component),
|
||||
},
|
||||
onEditorContentChange() {
|
||||
emit('update:modelValue', editor.topLevelBlocks)
|
||||
},
|
||||
editorDOMAttributes: {
|
||||
class: "editor",
|
||||
},
|
||||
_tiptapOptions: {
|
||||
content
|
||||
}
|
||||
})
|
||||
// console.log(editor)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<editor-content :editor="editor?._tiptapEditor" />
|
||||
</div>
|
||||
</template>
|
59
src/components/Milkdown/Block.vue
Normal file
59
src/components/Milkdown/Block.vue
Normal file
|
@ -0,0 +1,59 @@
|
|||
<script setup lang="ts">
|
||||
import { BlockProvider } from '@milkdown/plugin-block'
|
||||
import { useInstance } from '@milkdown/vue'
|
||||
import { usePluginViewContext } from '@prosemirror-adapter/vue'
|
||||
import { onUnmounted, ref, watch } from 'vue'
|
||||
|
||||
import type { VNodeRef } from 'vue'
|
||||
const { view } = usePluginViewContext()
|
||||
const [loading, get] = useInstance()
|
||||
|
||||
const divRef = ref<VNodeRef>()
|
||||
|
||||
let tooltipProvider: BlockProvider | undefined
|
||||
|
||||
watch([loading], () => {
|
||||
const editor = get()
|
||||
if (loading.value || !editor || tooltipProvider) return
|
||||
|
||||
editor.action((ctx) => {
|
||||
tooltipProvider = new BlockProvider({
|
||||
ctx,
|
||||
content: divRef.value as any,
|
||||
})
|
||||
|
||||
tooltipProvider.update(view.value)
|
||||
})
|
||||
})
|
||||
|
||||
watch([view], () => {
|
||||
tooltipProvider?.update(view.value)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
tooltipProvider?.destroy()
|
||||
tooltipProvider = undefined
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="divRef"
|
||||
className="w-6 bg-slate-200 rounded hover:bg-slate-300 cursor-grab"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth="{1.5}"
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
67
src/components/Milkdown/Editor.vue
Normal file
67
src/components/Milkdown/Editor.vue
Normal file
|
@ -0,0 +1,67 @@
|
|||
<script setup lang="ts">
|
||||
import { Editor, defaultValueCtx, rootCtx } from '@milkdown/core'
|
||||
import { commonmark } from '@milkdown/preset-commonmark'
|
||||
import { nord } from '@milkdown/theme-nord'
|
||||
import { history } from '@milkdown/plugin-history'
|
||||
import { math } from '@milkdown/plugin-math'
|
||||
import { Milkdown, useEditor } from '@milkdown/vue'
|
||||
import { tooltipFactory } from '@milkdown/plugin-tooltip'
|
||||
import { usePluginViewFactory } from '@prosemirror-adapter/vue'
|
||||
import { gfm } from '@milkdown/preset-gfm'
|
||||
import { clipboard } from '@milkdown/plugin-clipboard'
|
||||
import { emoji } from '@milkdown/plugin-emoji'
|
||||
import { block } from '@milkdown/plugin-block'
|
||||
import { cursor } from '@milkdown/plugin-cursor'
|
||||
|
||||
import Tooltip from './Tooltip.vue'
|
||||
import Slash from './Slash.vue'
|
||||
import Block from './Block.vue'
|
||||
|
||||
const tooltip = tooltipFactory('Text')
|
||||
const slash = tooltipFactory('Text')
|
||||
|
||||
const markdown = `# Milkdown Vue Commonmark
|
||||
> You're scared of a world where you're needed.
|
||||
|
||||
This is a demo for using Milkdown with **Vue**.`
|
||||
|
||||
const pluginViewFactory = usePluginViewFactory()
|
||||
|
||||
useEditor((root) => {
|
||||
return Editor.make()
|
||||
.config(nord)
|
||||
.config((ctx) => {
|
||||
ctx.set(rootCtx, root)
|
||||
ctx.set(defaultValueCtx, markdown)
|
||||
ctx.set(tooltip.key, {
|
||||
view: pluginViewFactory({
|
||||
component: Tooltip,
|
||||
}),
|
||||
})
|
||||
ctx.set(slash.key, {
|
||||
view: pluginViewFactory({
|
||||
component: Slash,
|
||||
}),
|
||||
})
|
||||
ctx.set(block.key, {
|
||||
view: pluginViewFactory({
|
||||
component: Block,
|
||||
}),
|
||||
})
|
||||
})
|
||||
.use(commonmark)
|
||||
.use(tooltip)
|
||||
.use(slash)
|
||||
.use(history)
|
||||
.use(math)
|
||||
.use(gfm)
|
||||
.use(clipboard)
|
||||
.use(emoji)
|
||||
.use(block)
|
||||
.use(cursor)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Milkdown />
|
||||
</template>
|
59
src/components/Milkdown/Slash.vue
Normal file
59
src/components/Milkdown/Slash.vue
Normal file
|
@ -0,0 +1,59 @@
|
|||
<script setup lang="ts">
|
||||
import { editorViewCtx } from '@milkdown/core'
|
||||
import { SlashProvider } from '@milkdown/plugin-slash'
|
||||
import { createCodeBlockCommand } from '@milkdown/preset-commonmark'
|
||||
import { callCommand } from '@milkdown/utils'
|
||||
import { useInstance } from '@milkdown/vue'
|
||||
import { usePluginViewContext } from '@prosemirror-adapter/vue'
|
||||
import { onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
|
||||
import type { VNodeRef } from 'vue'
|
||||
const { view, prevState } = usePluginViewContext()
|
||||
const [loading, get] = useInstance()
|
||||
|
||||
const divRef = ref<VNodeRef>()
|
||||
|
||||
let tooltipProvider: SlashProvider
|
||||
|
||||
onMounted(() => {
|
||||
tooltipProvider = new SlashProvider({
|
||||
content: divRef.value as any,
|
||||
})
|
||||
|
||||
tooltipProvider.update(view.value, prevState.value)
|
||||
})
|
||||
|
||||
watch([view, prevState], () => {
|
||||
tooltipProvider?.update(view.value, prevState.value)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
tooltipProvider.destroy()
|
||||
})
|
||||
|
||||
const addCodeBlock = (e: Event) => {
|
||||
if (loading.value) return
|
||||
|
||||
e.preventDefault()
|
||||
|
||||
get()!.action((ctx) => {
|
||||
const view = ctx.get(editorViewCtx)
|
||||
const { dispatch, state } = view
|
||||
const { tr, selection } = state
|
||||
const { from } = selection
|
||||
dispatch(tr.deleteRange(from - 1, from))
|
||||
return callCommand(createCodeBlockCommand.key)(ctx)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="divRef">
|
||||
<button
|
||||
className="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
|
||||
@mousedown="addCodeBlock"
|
||||
>
|
||||
Code Block
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
50
src/components/Milkdown/Tooltip.vue
Normal file
50
src/components/Milkdown/Tooltip.vue
Normal file
|
@ -0,0 +1,50 @@
|
|||
<script setup lang="ts">
|
||||
import { TooltipProvider } from '@milkdown/plugin-tooltip'
|
||||
import { toggleStrongCommand } from '@milkdown/preset-commonmark'
|
||||
import { callCommand } from '@milkdown/utils'
|
||||
import { useInstance } from '@milkdown/vue'
|
||||
import { usePluginViewContext } from '@prosemirror-adapter/vue'
|
||||
import { onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
|
||||
import type { VNodeRef } from 'vue'
|
||||
|
||||
const { view, prevState } = usePluginViewContext()
|
||||
const [loading, get] = useInstance()
|
||||
|
||||
const divRef = ref<VNodeRef>()
|
||||
|
||||
let tooltipProvider: TooltipProvider
|
||||
|
||||
onMounted(() => {
|
||||
tooltipProvider = new TooltipProvider({
|
||||
content: divRef.value as any,
|
||||
})
|
||||
|
||||
tooltipProvider.update(view.value, prevState.value)
|
||||
})
|
||||
|
||||
watch([view, prevState], () => {
|
||||
tooltipProvider?.update(view.value, prevState.value)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
tooltipProvider.destroy()
|
||||
})
|
||||
|
||||
const toggleBold = (e: Event) => {
|
||||
if (loading.value) return
|
||||
e.preventDefault()
|
||||
get()!.action(callCommand(toggleStrongCommand.key))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="divRef">
|
||||
<button
|
||||
className="text-gray-600 bg-slate-200 px-2 py-1 rounded-lg hover:bg-slate-300 border hover:text-gray-900"
|
||||
@mousedown="toggleBold"
|
||||
>
|
||||
Bold
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
|
@ -1,35 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import type { BaseSlashMenuItem } from '@blocknote/core'
|
||||
import type { SlashMenuProps } from './slashMenuFactory'
|
||||
import SlashMenuItem from './SlashMenuItem.vue'
|
||||
const props = defineProps<{
|
||||
reactiveParams: SlashMenuProps
|
||||
}>()
|
||||
function onClick(menu: BaseSlashMenuItem) {
|
||||
props.reactiveParams.itemCallback(menu)
|
||||
}
|
||||
function isSelected(i: number) {
|
||||
return props.reactiveParams.keyboardHoveredItemIndex === i
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<slot name="SlashMenu">
|
||||
<template v-for="(menu, i) in reactiveParams.items" :key="menu.name">
|
||||
<slot :name="`SlashMenuItem-${menu.name}`" :menu="menu" :selected="isSelected(i)" :on-click="() => onClick(menu)">
|
||||
<SlashMenuItem :menu="menu" :selected="isSelected(i)" :on-click="() => onClick(menu)" />
|
||||
</slot>
|
||||
</template>
|
||||
</slot>
|
||||
</template>
|
||||
|
||||
<style style="postcss">
|
||||
.slash-menu {
|
||||
position: absolute;
|
||||
background: white;
|
||||
box-shadow: rgb(223, 225, 230) 0px 4px 8px, rgb(223, 225, 230) 0px 0px 1px;
|
||||
border: 1px solid rgb(236, 237, 240);
|
||||
border-radius: 6px;
|
||||
padding: 4px;
|
||||
}
|
||||
</style>
|
|
@ -1,22 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import type { BaseSlashMenuItem } from '@blocknote/core'
|
||||
const props = defineProps<{
|
||||
menu: BaseSlashMenuItem
|
||||
selected: boolean
|
||||
onClick: Function
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<button :class="selected && 'selected'" @click="onClick()">
|
||||
{{ menu.name }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style style="postcss" scoped>
|
||||
.selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
|
@ -1,51 +0,0 @@
|
|||
import type { BaseSlashMenuItem, SuggestionsMenuFactory } from '@blocknote/core'
|
||||
|
||||
import type { ComponentInternalInstance } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
|
||||
import { mount } from '../../mount'
|
||||
|
||||
import SlashMenu from './SlashMenu.vue'
|
||||
|
||||
export interface SlashMenuProps {
|
||||
items: BaseSlashMenuItem[]
|
||||
keyboardHoveredItemIndex: number
|
||||
itemCallback: (item: BaseSlashMenuItem) => void
|
||||
}
|
||||
|
||||
/**
|
||||
* This menu is drawn next to a block, when it's hovered over
|
||||
* It renders a drag handle and + button to create a new block
|
||||
*/
|
||||
export function slashMenuFactory(component: ComponentInternalInstance) {
|
||||
const slashMenuFactory: SuggestionsMenuFactory<BaseSlashMenuItem> = (staticParams: SlashMenuProps) => {
|
||||
// Mount component
|
||||
const reactiveParams = reactive<SlashMenuProps>(staticParams)
|
||||
|
||||
const { el } = mount(SlashMenu, {
|
||||
app: component.appContext.app,
|
||||
children: component.slots, // Pass all slots or filter for slashMenu ?
|
||||
props: { reactiveParams },
|
||||
})
|
||||
el.classList.add('slash-menu')
|
||||
document.body.appendChild(el)
|
||||
|
||||
return {
|
||||
element: el,
|
||||
render: (params, isActive) => {
|
||||
Object.assign(reactiveParams, params)
|
||||
|
||||
if (isActive)
|
||||
el.style.display = 'block'
|
||||
|
||||
el.style.top = `${params.referenceRect.y}px`
|
||||
el.style.left = `${params.referenceRect.x - el.offsetWidth}px`
|
||||
},
|
||||
hide: () => {
|
||||
el.style.display = 'none'
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
return slashMenuFactory
|
||||
}
|
52
src/mount.ts
52
src/mount.ts
|
@ -1,52 +0,0 @@
|
|||
import type { App, Component, VNode } from 'vue'
|
||||
import { cloneVNode, createVNode, render } from 'vue'
|
||||
|
||||
/**
|
||||
* Inspiration from https://github.com/pearofducks/mount-vue-component/blob/master/index.js
|
||||
* And official `mount` Vue3 https://github.com/vuejs/core/blob/650f5c26f464505d9e865bdb0eafb24350859528/packages/runtime-core/src/apiCreateApp.ts#L294
|
||||
*/
|
||||
|
||||
interface Mount {
|
||||
props: any
|
||||
children?: unknown
|
||||
element?: HTMLElement
|
||||
app: App
|
||||
}
|
||||
|
||||
const __DEV__ = process.env.NODE_ENV === 'development'
|
||||
|
||||
export function mount(component: Component, { props, children, element, app }: Mount): {
|
||||
vnode: VNode, destroy: () => void, el: HTMLElement
|
||||
} {
|
||||
const el = element || document.createElement('div')
|
||||
|
||||
let vnode: VNode | null = createVNode(component, props, children)
|
||||
if (app && app._context)
|
||||
vnode.appContext = app._context
|
||||
|
||||
// HMR root reload
|
||||
if (__DEV__) {
|
||||
app._context.reload = () => {
|
||||
render(cloneVNode(vnode!), el) // , isSVG)
|
||||
}
|
||||
}
|
||||
|
||||
if (el)
|
||||
render(vnode, el)
|
||||
else if (typeof document !== 'undefined')
|
||||
render(vnode, el)
|
||||
|
||||
// if (isHydrate && hydrate) {
|
||||
// hydrate(vnode as VNode<Node, Element>, el as any)
|
||||
// } else {
|
||||
// render(vnode, el, isSVG)
|
||||
// }
|
||||
|
||||
const destroy = () => {
|
||||
if (el)
|
||||
render(null, el)
|
||||
vnode = null
|
||||
}
|
||||
|
||||
return { vnode, destroy, el: el as HTMLElement }
|
||||
}
|
|
@ -1,91 +1,11 @@
|
|||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
.milkdown {
|
||||
@apply bg-slate-50 px-2 py-4 m-5 border rounded;
|
||||
}
|
||||
|
||||
.editor {
|
||||
padding: 0 calc((100% - 731px) / 2);
|
||||
height: 100%;
|
||||
@apply mx-auto;
|
||||
}
|
4
src/vite-env.d.ts
vendored
4
src/vite-env.d.ts
vendored
|
@ -1 +1,5 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.vue' {
|
||||
export = any;
|
||||
}
|
||||
|
|
9
tailwind.config.cjs
Normal file
9
tailwind.config.cjs
Normal file
|
@ -0,0 +1,9 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['**/*.tsx', '**/*.ts', '**/*.vue', '**/*.html'],
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [require('@tailwindcss/typography')],
|
||||
}
|
|
@ -11,7 +11,9 @@
|
|||
"esModuleInterop": true,
|
||||
"lib": ["ESNext", "DOM"],
|
||||
"skipLibCheck": true,
|
||||
"noEmit": true
|
||||
"noEmit": true,
|
||||
"noPropertyAccessFromIndexSignature": false,
|
||||
"allowJs": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
|
|
|
@ -1,27 +1,7 @@
|
|||
import { URL, fileURLToPath } from 'node:url'
|
||||
import * as path from 'path'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig((conf) => {
|
||||
const config = {
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
// Comment out the lines below to load a built version of blocknote
|
||||
// or, keep as is to load live from sources with live reload working
|
||||
if (conf.command === 'build') {
|
||||
Object.assign(config.resolve.alias, {
|
||||
'@blocknote/core': path.resolve(__dirname, '../../packages/core/src/'),
|
||||
})
|
||||
}
|
||||
|
||||
return config
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
})
|
||||
|
|
Loading…
Reference in a new issue