@milkdown-lab/plugin-fullscreen
TypeScript icon, indicating that this package has built-in type declarations

1.2.2 • Public • Published

@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()

Package Sidebar

Install

npm i @milkdown-lab/plugin-fullscreen

Weekly Downloads

1

Version

1.2.2

License

MIT

Unpacked Size

4.6 kB

Total Files

4

Last publish

Collaborators

  • enpitsulin