Skiff ProseMirror

yarn add skiff-prosemirror

yarn add react react-dom yjs y-protocols

import { RichTextEditor, EditorSchema, buildEditorPlugins } from 'skiff-prosemirror';
import { EditorState } from 'prosemirror-state';
import { ThemeMode } from 'nightwatch-ui';

function Editor() {
  const [editorState, setEditorState] = useState(() =>
    EditorState.create({
      schema: EditorSchema,
      plugins: buildEditorPlugins({
        schema: EditorSchema,
        theme: ThemeMode.LIGHT
      })
    })
  );

  const handleChange = (
    state: EditorState,
    docChanged: boolean
  ) => {
    setEditorState(state);
    if (docChanged) {
      // Handle document changes
    }
  };

  return (
    <RichTextEditor
      editorState={editorState}
      onChange={handleChange}
      theme={ThemeMode.LIGHT}
      placeholder="Start writing..."
    />
  );
}

const plugins = buildEditorPlugins({
  schema: EditorSchema,
  readOnly: true,
  theme: ThemeMode.DARK
});

const state = EditorState.create({
  schema: EditorSchema,
  plugins,
  doc: // ... your document
});

<RichTextEditor
  editorState={state}
  onChange={handleChange}
  disabled={true}
/>

import { EditorSchema, LooseSchema } from 'skiff-prosemirror';

// Standard schema with required structure
const schema = EditorSchema;

// Loose schema for importing external documents
const looseSchema = LooseSchema;

import { buildEditorPlugins } from 'skiff-prosemirror';

interface BuildEditorPluginsProps {
  schema: Schema;
  userSettings?: UserSettings;
  readOnly?: boolean;
  theme?: ThemeMode;
  isTemplate?: boolean;
}

const plugins = buildEditorPlugins({
  schema: EditorSchema,
  readOnly: false,
  theme: ThemeMode.LIGHT,
  isTemplate: false
});

import { toggleMark } from 'prosemirror-commands';
import { EditorState } from 'prosemirror-state';

// Bold
toggleMark(schema.marks.strong)(state, dispatch);

// Italic
toggleMark(schema.marks.em)(state, dispatch);

// Underline
toggleMark(schema.marks.underline)(state, dispatch);

// Insert heading
const headingCommand = setBlockType(schema.nodes.heading, { level: 2 });
headingCommand(state, dispatch);

// Insert code block
const codeBlockCommand = setBlockType(schema.nodes.code_block);
codeBlockCommand(state, dispatch);

// Insert horizontal rule
const hrCommand = (state, dispatch) => {
  dispatch(state.tr.replaceSelectionWith(schema.nodes.horizontal_rule.create()));
  return true;
};

import { insertMathCmd } from '@benrbray/prosemirror-math';

// Insert inline math
const mathCommand = insertMathCmd(schema.nodes.math_inline);
mathCommand(state, dispatch);

import { convertFromHTML } from 'skiff-prosemirror';
import { DOMParser } from 'prosemirror-model';

// Convert HTML to ProseMirror document
const doc = convertFromHTML(htmlString, EditorSchema);

const state = EditorState.create({
  schema: EditorSchema,
  doc
});

import { SerializeToMarkdown } from 'skiff-prosemirror';

const markdown = SerializeToMarkdown(editorState.doc);

import { ySyncPlugin, yCursorPlugin, yUndoPlugin } from 'y-prosemirror';
import * as Y from 'yjs';

const ydoc = new Y.Doc();
const type = ydoc.get('prosemirror', Y.XmlFragment);

const plugins = [
  ySyncPlugin(type),
  yCursorPlugin(provider.awareness),
  yUndoPlugin(),
  ...buildEditorPlugins({ schema: EditorSchema })
];

import { commentPluginKey } from 'skiff-prosemirror';

// Access comment plugin state
const commentState = commentPluginKey.getState(editorState);

// Check if thread is unread
import { checkIfThreadUnreadByAttrs } from 'skiff-prosemirror';
const isUnread = checkIfThreadUnreadByAttrs(threadAttrs, userId);

import { 
  SubpagePlugin, 
  updateChildDocuments,
  stopPreventRemoveSubpage 
} from 'skiff-prosemirror';

// Update child document references
updateChildDocuments(view, childDocIds);

// Allow subpage removal
stopPreventRemoveSubpage(view);

import { EditorView } from 'prosemirror-view';

const nodeViews = {
  image: (node, view, getPos) => {
    const dom = document.createElement('div');
    const img = document.createElement('img');
    img.src = node.attrs.src;
    dom.appendChild(img);
    
    return {
      dom,
      update: (updatedNode) => {
        if (updatedNode.type.name !== 'image') return false;
        img.src = updatedNode.attrs.src;
        return true;
      }
    };
  }
};

<RichTextEditor
  editorState={state}
  initialNodeViews={nodeViews}
  onChange={handleChange}
/>

import { ThemeMode } from 'nightwatch-ui';

<RichTextEditor
  theme={ThemeMode.DARK}
  editorState={state}
  onChange={handleChange}
/>

import 'skiff-prosemirror/style.css';

import { Plugin, PluginKey } from 'prosemirror-state';

const myPluginKey = new PluginKey('myPlugin');

const myPlugin = new Plugin({
  key: myPluginKey,
  state: {
    init: () => ({ /* initial state */ }),
    apply: (tr, state) => {
      // Update state based on transaction
      return state;
    }
  },
  props: {
    handleClick: (view, pos, event) => {
      // Handle clicks
      return false;
    }
  },
  view: (editorView) => ({
    update: (view, prevState) => {
      // React to state changes
    },
    destroy: () => {
      // Cleanup
    }
  })
});

import { dispatchSelectionChange } from 'skiff-prosemirror';
import { TextSelection } from 'prosemirror-state';

// Programmatically update selection
const tr = state.tr.setSelection(
  TextSelection.create(state.doc, start, end)
);
dispatch(tr);

// Dispatch browser selection change event
dispatchSelectionChange();

import { focusEditorSelection } from 'skiff-prosemirror';

// Focus editor at specific position
focusEditorSelection(view, position);

import { LooseSchema } from 'skiff-prosemirror';

const state = EditorState.create({
  schema: LooseSchema,
  doc: importedDoc
});

import { EditorState } from 'prosemirror-state';
import { DOMParser } from 'prosemirror-model';

// Create empty document
const emptyState = EditorState.create({
  schema: EditorSchema,
  plugins: buildEditorPlugins({ schema: EditorSchema })
});

// Create from JSON
const docJSON = { /* ... */ };
const doc = EditorSchema.nodeFromJSON(docJSON);
const state = EditorState.create({
  schema: EditorSchema,
  doc,
  plugins
});

// Serialize to JSON
const docJSON = editorState.doc.toJSON();

// Store in backend
await saveDocument({
  id: documentId,
  content: docJSON
});

import { 
  EditorCustomStatePlugin, 
  getCustomState 
} from 'skiff-prosemirror';

// Add custom state to editor
const customState = { /* your state */ };
const plugin = new EditorCustomStatePlugin(customState);

// Retrieve custom state
const state = getCustomState(editorState);