mirror of
https://codeberg.org/Sevichecc/Seigwai.git
synced 2025-06-17 16:59:14 +08:00
Add BlockNote,ref https://github.com/TypeCellOS/BlockNote/pull/130/files
This commit is contained in:
sevichecc
parent
48605b2214
commit
cd787f3953
GPG key ID:
C577000000000000
17 changed files with 2340 additions and 160 deletions
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"extends": "@antfu"
|
||||
}
|
||||
15
.eslintrc.cjs
Normal file
15
.eslintrc.cjs
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
/* 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',
|
||||
},
|
||||
}
|
||||
14
package.json
14
package.json
|
|
@ -6,13 +6,23 @@
|
|||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint .",
|
||||
"lint:fix": "eslint . --fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@blocknote/core": "^0.4.5",
|
||||
"@tiptap/vue-3": "2.0.0-beta.220",
|
||||
"masto": "^5.10.0",
|
||||
"vue": "^3.2.45"
|
||||
"vue": "^3.2.47"
|
||||
},
|
||||
"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",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"eslint": "^8.34.0",
|
||||
|
|
|
|||
1867
pnpm-lock.yaml
1867
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
23
src/App.vue
23
src/App.vue
|
|
@ -1,3 +1,24 @@
|
|||
<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>
|
||||
|
||||
<template>
|
||||
<h2>App</h2>
|
||||
<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>
|
||||
</template>
|
||||
|
|
|
|||
128
src/blocks.json
Normal file
128
src/blocks.json
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
[
|
||||
{
|
||||
"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": []
|
||||
}
|
||||
]
|
||||
53
src/components/BlockNoteView.vue
Normal file
53
src/components/BlockNoteView.vue
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<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>
|
||||
101
src/components/BlockSideMenu/BlockSideMenu.vue
Normal file
101
src/components/BlockSideMenu/BlockSideMenu.vue
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<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>
|
||||
48
src/components/BlockSideMenu/blockSideMenuFactory.ts
Normal file
48
src/components/BlockSideMenu/blockSideMenuFactory.ts
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
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
|
||||
}
|
||||
53
src/components/Editor.vue
Normal file
53
src/components/Editor.vue
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<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>
|
||||
0
src/components/Login.vue
Normal file
0
src/components/Login.vue
Normal file
35
src/components/SlashMenu/SlashMenu.vue
Normal file
35
src/components/SlashMenu/SlashMenu.vue
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<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>
|
||||
22
src/components/SlashMenu/SlashMenuItem.vue
Normal file
22
src/components/SlashMenu/SlashMenuItem.vue
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<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>
|
||||
51
src/components/SlashMenu/slashMenuFactory.ts
Normal file
51
src/components/SlashMenu/slashMenuFactory.ts
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
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
Normal file
52
src/mount.ts
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
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 }
|
||||
}
|
||||
|
|
@ -78,3 +78,14 @@ button:focus-visible {
|
|||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.editor {
|
||||
padding: 0 calc((100% - 731px) / 2);
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,7 +1,27 @@
|
|||
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({
|
||||
plugins: [vue()],
|
||||
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
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue