@joinezco/markdown-editor 0.0.1

package/src/App.css

@@ -0,0 +1,236 @@
+@font-face {
+  font-family: "Source Serif 4";
+  src: url("/fonts/Source_Serif_4/SourceSerif4-VariableFont_opsz,wght.ttf") format("truetype-variations");
+  font-weight: 200 900;
+  /* range supported by the variable font */
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Source Serif 4";
+  src: url("/fonts/Source_Serif_4/SourceSerif4-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations");
+  font-weight: 200 900;
+  font-style: italic;
+}
+
+/* TODO: use unique CSS class so it's not likely to conflict with existing page styles */
+
+.ProseMirror {
+  font-family: 'Source Serif 4', system-ui, Avenir, Helvetica, Arial, serif;
+  padding: 2rem;
+  min-height: 200px;
+  outline: none;
+  border: 4px solid #000;
+  max-width: min(60ch, 85vw);
+  box-shadow: -1rem 1rem black;
+
+  h1 {
+    margin-top: 0;
+  }
+}
+
+/* Slash Commands Dropdown */
+.slash-commands-dropdown {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 4px;
+  min-width: 280px;
+  z-index: 1000;
+  outline: none;
+}
+
+.slash-command-item {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  background: none;
+  border-radius: 6px;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 0.15s ease;
+}
+
+.slash-command-item:hover,
+.slash-command-item.selected {
+  background-color: #f1f5f9;
+}
+
+.slash-command-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.slash-command-icon {
+  font-size: 18px;
+  width: 24px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.slash-command-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.slash-command-title {
+  font-weight: 500;
+  color: #1e293b;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.slash-command-description {
+  color: #64748b;
+  font-size: 12px;
+  line-height: 1.3;
+  margin-top: 2px;
+}
+
+/* Tippy.js theme for slash commands */
+.tippy-box[data-theme~='slash-commands'] {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+}
+
+.tippy-box[data-theme~='slash-commands'] .tippy-content {
+  padding: 0;
+}
+
+/* Settings Modal */
+.settings-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+}
+
+.settings-modal {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+  width: 90%;
+  max-width: 500px;
+  max-height: 80vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.settings-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.settings-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.settings-close {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #64748b;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  transition: background-color 0.15s ease;
+}
+
+.settings-close:hover {
+  background-color: #f1f5f9;
+}
+
+.settings-content {
+  padding: 24px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.setting-group {
+  margin-bottom: 20px;
+}
+
+.setting-group label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #374151;
+  cursor: pointer;
+}
+
+.setting-group input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+}
+
+.setting-group select {
+  margin-left: 8px;
+  padding: 4px 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.settings-footer {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  padding: 20px 24px;
+  border-top: 1px solid #e2e8f0;
+}
+
+.settings-save,
+.settings-cancel {
+  padding: 8px 16px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.settings-save {
+  background: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+.settings-save:hover {
+  background: #2563eb;
+  border-color: #2563eb;
+}
+
+.settings-cancel {
+  background: white;
+  color: #374151;
+}
+
+.settings-cancel:hover {
+  background: #f9fafb;
+}

package/src/App.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useRef, useState } from 'react';
+import { createEditor, MarkdownEditor } from './lib/editor';
+import { CodeblockFS, SearchIndex } from '@joinezco/codeblock';
+import './App.css'
+import { file } from './test/example';
+
+function App() {
+  const [markdownContent, setMarkdownContent] = useState('');
+  const [editor, setEditor] = useState<MarkdownEditor | null>(null);
+  const ref = useRef(null);
+
+  async function loadFs() {
+    const fs = await CodeblockFS.worker('/snapshot.bin');
+
+    // Generate or load search index
+    try {
+      const index = await SearchIndex.get(fs, '.codeblock/index.json');
+      console.log('Search index ready with', index, 'documents');
+    } catch (error) {
+      console.warn('Failed to create search index:', error);
+    }
+
+    return fs;
+  }
+
+  useEffect(() => {
+
+    let newEditor: MarkdownEditor | null = null;
+
+    if (ref.current && !editor) {
+      loadFs().then(async fs => {
+        console.debug('Loaded filesystem', fs);
+
+        await fs.writeFile('test.md', file);
+
+        newEditor = createEditor({
+          element: ref.current!,
+          fs: {
+            fs: fs,
+            filepath: 'test.md',
+            autoSave: false,
+          },
+          onUpdate: ({ editor }) => {
+            const markdown = (editor as MarkdownEditor).storage.markdown.getMarkdown();
+            setMarkdownContent(markdown);
+          },
+        });
+        setEditor(newEditor);
+      });
+    }
+
+    return () => {
+      if (ref.current) {
+        newEditor?.destroy();
+      }
+    };
+
+  }, [ref.current])
+
+
+  return (
+    <div style={{ padding: '20px', maxWidth: '800px', margin: 'auto' }}>
+      <div id='md-editor' ref={ref}></div>
+      <hr style={{ margin: '20px 0' }} />
+      <h2>Live Markdown Output:</h2>
+      <pre style={{ whiteSpace: 'pre-wrap', background: '#eee', padding: '10px', border: '1px solid #ccc' }}>
+        {markdownContent}
+      </pre>
+    </div>
+  );
+}
+
+export default App;

package/src/index.css

@@ -0,0 +1,63 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #2732fe;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/lib/editor/commands/index.ts

@@ -0,0 +1,110 @@
+import { SlashCommand } from '../extensions/slash-commands'
+
+// Settings modal utility function
+const openSettingsModal = (editor: any) => {
+    // Create a simple modal for settings
+    const modal = document.createElement('div')
+    modal.className = 'settings-modal-overlay'
+
+    const modalContent = document.createElement('div')
+    modalContent.className = 'settings-modal'
+
+    modalContent.innerHTML = `
+    <div class="settings-header">
+      <h3>Editor Settings</h3>
+      <button class="settings-close">&times;</button>
+    </div>
+    <div class="settings-content">
+      <div class="setting-group">
+        <label>
+          <input type="checkbox" id="auto-save" ${editor.storage.persistence?.options?.autoSave ? 'checked' : ''}>
+          Auto-save documents
+        </label>
+      </div>
+      <div class="setting-group">
+        <label>
+          <input type="checkbox" id="word-wrap" checked>
+          Word wrap
+        </label>
+      </div>
+      <div class="setting-group">
+        <label>
+          Theme:
+          <select id="theme-select">
+            <option value="light">Light</option>
+            <option value="dark">Dark</option>
+            <option value="auto">Auto</option>
+          </select>
+        </label>
+      </div>
+    </div>
+    <div class="settings-footer">
+      <button class="settings-save">Save</button>
+      <button class="settings-cancel">Cancel</button>
+    </div>
+  `
+
+    modal.appendChild(modalContent)
+
+    const closeModal = () => {
+        if (document.body.contains(modal)) {
+            document.body.removeChild(modal)
+        }
+    }
+
+    const saveSettings = () => {
+        const autoSave = (modal.querySelector('#auto-save') as HTMLInputElement).checked
+        const theme = (modal.querySelector('#theme-select') as HTMLSelectElement).value
+
+        // Apply settings
+        if (editor.storage.persistence?.options) {
+            editor.storage.persistence.options.autoSave = autoSave
+        }
+
+        // Apply theme (you can extend this based on your theme system)
+        document.documentElement.setAttribute('data-theme', theme)
+
+        console.log('Settings saved:', { autoSave, theme })
+        closeModal()
+    }
+
+    // Event listeners
+    const closeButton = modal.querySelector('.settings-close')
+    const cancelButton = modal.querySelector('.settings-cancel')
+    const saveButton = modal.querySelector('.settings-save')
+
+    if (closeButton) closeButton.addEventListener('click', closeModal)
+    if (cancelButton) cancelButton.addEventListener('click', closeModal)
+    if (saveButton) saveButton.addEventListener('click', saveSettings)
+
+    modal.addEventListener('click', (e) => {
+        if (e.target === modal) closeModal()
+    })
+
+    // Handle escape key
+    const handleEscape = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+            closeModal()
+            document.removeEventListener('keydown', handleEscape)
+        }
+    }
+    document.addEventListener('keydown', handleEscape)
+
+    document.body.appendChild(modal)
+}
+
+
+export const defaultSlashCommands: SlashCommand[] = [
+    {
+        title: 'Settings',
+        description: 'Configure editor preferences',
+        icon: '⚙️',
+        command: ({ editor, range }) => {
+            // Remove the slash command text
+            editor.chain().focus().deleteRange(range).run()
+
+            // Open settings modal
+            openSettingsModal(editor)
+        },
+    },
+]

package/src/lib/editor/extensions/bullet-to-task.test.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest';
+import { createEditor } from '../index';
+
+describe('BulletToTaskConverter', () => {
+    it('should convert bullet list item to task item when [ ] is typed', () => {
+        const editor = createEditor();
+
+        // Set initial content with a bullet list
+        editor.commands.setContent('* Hello world');
+
+        // Simulate editing the content to add [ ]
+        editor.commands.setTextSelection(2); // Position after "* "
+        editor.commands.insertContent('[ ] ');
+
+        // Check if it converted to a task item
+        const json = editor.getJSON();
+        expect(json.content?.[0].type).toBe('taskList');
+        expect(json.content?.[0].content?.[0].type).toBe('taskItem');
+        expect(json.content?.[0].content?.[0].attrs?.checked).toBe(false);
+    });
+
+    it('should convert bullet list item to checked task item when [x] is typed', () => {
+        const editor = createEditor();
+
+        // Set initial content with a bullet list
+        editor.commands.setContent('* Hello world');
+
+        // Simulate editing the content to add [x]
+        editor.commands.setTextSelection(2); // Position after "* "
+        editor.commands.insertContent('[x] ');
+
+        // Check if it converted to a checked task item
+        const json = editor.getJSON();
+        expect(json.content?.[0].type).toBe('taskList');
+        expect(json.content?.[0].content?.[0].type).toBe('taskItem');
+        expect(json.content?.[0].content?.[0].attrs?.checked).toBe(true);
+    });
+});