MarkonEditor

// Framework-Agnostic Core
import { MarkonEditor, type MarkonEditorOptions } 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-root')!;

const editor = new MarkonEditor({
  element: container,
  initialValue: '# Product Roadmap 2026\n\nDetailed milestones...',
  placeholder: "Type '/' for commands...",
  showSlashCommands: true,
  showBubbleMenu: true,
  showWordCount: true,
  showSaveStatus: true,
  autoSave: {
    key: 'draft-roadmap-2026',
    debounceMs: 1000
  },
  onChange: (html, json, text) => {
    console.log('Words:', editor.getCounts().words);
  },
  onUploadFile: async (file) => {
    // Custom S3 / R2 upload logic
    return 'https://cdn.example.com/uploads/photo.jpg';
  }
});

// Programmatic methods:
// const markdown = editor.getMarkdown();
// const html = editor.getHTML();
// const jsonAst = editor.getJSON();
// editor.setMarkdown('# Updated Document');
// editor.focus();
// editor.destroy();

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

export default function DocumentCanvas() {
  const [content, setContent] = useState('<h2>Sprint Tasks</h2><p>Edit directly...</p>');

  return (
    <div className="w-full max-w-3xl p-6 rounded-2xl border border-default bg-surface shadow-xs">
      <MarkonEditor
        content={content}
        onChange={setContent}
        slashCommands={true}
        dragHandle={true}
        wordCount={true}
        placeholder="Type '/' for commands..."
        onUploadFile={async (file: File) => {
          const res = await fetch('/api/upload', { method: 'POST', body: file });
          const data = await res.json();
          return data.url;
        }}
      />
    </div>
  );
}