React 接入

import { MsfeEditorContent } from '@quirekit/msfe-react'
import { StarterKit } from '@quirekit/msfe-starter-kit'
import type { ReactEditorOptions } from '@quirekit/msfe-react'

const options: ReactEditorOptions = {
  markdown: '# Hello, Markdown',
  mode: 'live',
  extensions: [StarterKit],
}

/** @returns 当前应用中的编辑器组件。 */
export function EditorExample() {
  return <MsfeEditorContent options={options} />
}

import { useRef } from 'react'
import { useMsfeEditor, ReactNodeViewHost } from '@quirekit/msfe-react'
import { StarterKit } from '@quirekit/msfe-starter-kit'

/** @returns 保留 Context 的编辑器与组件视图宿主。 */
export function EditorWithHost() {
  const parent = useRef<HTMLDivElement>(null)
  const session = useMsfeEditor(parent, () => ({
    markdown: '开始编辑。',
    extensions: [StarterKit],
  }))

  return <>
    <div ref={parent} />
    {session && <ReactNodeViewHost host={session.host} />}
  </>
}

import type { MsfeNodeViewProps } from '@quirekit/msfe-core'
import { MsfeEditorContent, ReactNodeViewRenderer } from '@quirekit/msfe-react'
import { StarterKit } from '@quirekit/msfe-starter-kit'
import { Status } from './status'

interface StatusAttributes { readonly value: 'todo' | 'done' }
function StatusView({ nodeView }: { nodeView: MsfeNodeViewProps<StatusAttributes> }) {
  return <button disabled={nodeView.readOnly} onClick={() => nodeView.updateAttributes({
    value: nodeView.attrs.value === 'done' ? 'todo' : 'done',
  })}>{nodeView.attrs.value}</button>
}
// Status is the framework-independent extension from the custom-node tutorial.
const StatusWithUI = Status.extend({
  addNodeView() { return ReactNodeViewRenderer(StatusView) },
})

/** @returns A mounted editor using the custom React node view. */
export function StatusEditor() {
  return <MsfeEditorContent options={{
    markdown: '# Status\n\n[[todo]]', mode: 'live',
    extensions: [StarterKit, StatusWithUI],
  }} />
}