1.3.1 • Published 4 months ago
@milkdown-lab/plugin-fullscreen v1.3.1
@milkdown-lab/plugin-fullscreen
Plugin add fullscreen
feature to milkdown editor.
Usage
pnpm add @milkdown-lab/plugin-fullscreen
import { fullscreen } from '@milkdown-lab/plugin-fullscreen'
// ...
const editor = await Editor.make()
.config(() => {
ctx.set(rootCtx, document.querySelector('#app'))
})
.use(fullscreen)
.create()
Plugins add keyboard shortcuts, you can use F11
to toggle fullscreen when editor was be focused.
Options
Styling
@milkdown-lab/plugin-fullscreen
is now headless as same as milkdown
v7, see here for reason, so you need styling by yourself.
you should styling .milkdown.fullscreen
selector by default option, for example:
.milkdown.fullscreen {
position: fixed;
inset: 0;
overflow-y: scroll;
}
Adding custom attributes
You can also add attributes to fullscreen element if you want if you want to build your own style logic or using atom css library like tailwindcss.
import { fullscreen } from '@milkdown-lab/plugin-fullscreen'
// ...
const editor = await Editor.make()
.config(() => {
ctx.set(fullscreenOptionsCtx.key, { attributes: { class: 'fixed inset-0 overflow-y-scroll' } })
ctx.set(rootCtx, document.querySelector('#app'))
})
.use(fullscreen)
.create()