Slash Commands

// Framework-Agnostic Core
import { MarkonEditor, createSlashCommandExtension } from '@nofinite/markon';

// React Adapter
import { MarkonEditor as ReactMarkonEditor } from '@nofinite/markon/react';

import { MarkonEditor } from '@nofinite/markon';
import '@nofinite/nuicss/styles.css';

const container = document.querySelector('#editor')!;

const editor = new MarkonEditor({
  element: container,
  initialValue: '<p>Type <code>/</code> for commands...</p>',
  showSlashCommands: true, // Enabled by default
  placeholder: "Type '/' for commands..."
});

import React, { useState } from 'react';
import { MarkonEditor } from '@nofinite/markon/react';
import '@nofinite/nuicss/styles.css';

export function EditorWithCommands() {
  const [content, setContent] = useState('<p>Type <code>/</code> to see commands...</p>');

  return (
    <div className="w-full max-w-4xl mx-auto p-6 bg-surface border border-default rounded-2xl shadow-sm">
      <MarkonEditor
        content={content}
        onChange={setContent}
        slashCommands={true}
        placeholder="Type '/' for commands..."
      />
    </div>
  );
}