Prosemirror adapter for svelte

Show
1

A few months ago, I’ve introduced the prosemirror adapter for React and Vue.

Today, I’d like to introduce the svelte version.

Highlight:

Nodeview

<script lang="ts">
import { useNodeViewContext } from "@prosemirror-adapter/svelte";
let selected = false;

const contentRef = useNodeViewContext('contentRef');
const selectedStore = useNodeViewContext('selected');
selectedStore.subscribe((value) => {
  selected = value;
})

</script>

<div use:contentRef class:selected={selected} />

<style>
.selected {
  outline: blue solid 1px;
}
</style>

PluginView

<script lang="ts">
import { usePluginViewContext } from '@prosemirror-adapter/svelte'
const viewStore = usePluginViewContext('view');
let size = 0;

viewStore.subscribe(view => {
  size = view.state.doc.nodeSize;
})
</script>

<div>Size for document: { size }</div>

WidgetView

<script lang="ts">
  import { useWidgetViewContext } from '@prosemirror-adapter/svelte'

  const spec = useWidgetViewContext('spec')
  const level = spec?.level
  const hashes = Array(level || 0).fill('#').join('')
</script>

<span class="hash">{hashes}</span>

<style>
  .hash {
    color: blue;
    margin-right: 6px;
  }
</style>

Hope it helps!

2

Something like this. But please read up on Lezer a bit more before trying to port a grammar to it. Things like putting built-in identifiers in the tokenizer really doesn’t work (it blows up the token space and will match these even if there are other identifier characters after them).

3

Cool! You could use auto-subscribe to make it look even svelter :wink:

$: size = $viewStore.state.doc.nodesize;
1 Like