Implement ID-based routing and folder auto-generation from titles
Major features:
- Switch from slug-based to ID-based routing (/documents/123)
- Enable title editing with automatic slug/path regeneration
- Auto-generate folder structure from title slashes (e.g., Laravel/Livewire/Components)
- Persist sidebar folder open/close state using localStorage
- Remove slug unique constraint (ID routing makes it unnecessary)
- Implement recursive tree view with multi-level folder support
Architecture changes:
- DocumentService: Add generatePathAndSlug() for title-based path generation
- Routes: Change from {document:slug} to {document} for ID binding
- SidebarTree: Extract recursive rendering to partials/tree-item.blade.php
- Database: Remove unique constraint from documents.slug column
UI improvements:
- Display only last path component in sidebar (Components vs Laravel/Livewire/Components)
- Folder state persists across page navigation via localStorage
- Title field accepts slashes for folder organization
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
166
src/resources/views/livewire/document-editor.blade.php
Normal file
166
src/resources/views/livewire/document-editor.blade.php
Normal file
@@ -0,0 +1,166 @@
|
||||
<div class="max-w-5xl mx-auto p-8">
|
||||
<!-- Flash Messages -->
|
||||
@if (session()->has('message'))
|
||||
<div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded">
|
||||
{{ session('message') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if (session()->has('error'))
|
||||
<div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded">
|
||||
{{ session('error') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Header -->
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<h1 class="text-3xl font-bold text-gray-900">
|
||||
{{ $isEditMode ? 'Edit Document' : 'New Document' }}
|
||||
</h1>
|
||||
|
||||
<div class="flex space-x-3">
|
||||
@if($isEditMode && $document)
|
||||
<a
|
||||
href="{{ route('documents.show', $document) }}"
|
||||
class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
Cancel
|
||||
</a>
|
||||
|
||||
<button
|
||||
wire:click="delete"
|
||||
wire:confirm="Are you sure you want to delete this document?"
|
||||
class="inline-flex items-center px-4 py-2 border border-red-300 rounded-md text-sm font-medium text-red-700 bg-white hover:bg-red-50"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
@else
|
||||
<a
|
||||
href="{{ route('documents.show', 'home') }}"
|
||||
class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
Cancel
|
||||
</a>
|
||||
@endif
|
||||
|
||||
<button
|
||||
wire:click="save"
|
||||
class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-indigo-700"
|
||||
>
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path>
|
||||
</svg>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form -->
|
||||
<form wire:submit.prevent="save" class="space-y-6">
|
||||
<!-- Title -->
|
||||
<div>
|
||||
<label for="title" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Title
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
wire:model="title"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
||||
placeholder="Document Title (use / for folders, e.g. Laravel/Livewire/Components)"
|
||||
>
|
||||
@error('title')
|
||||
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
<p class="mt-1 text-xs text-gray-500">
|
||||
Tip: Use slashes (/) in the title to organize documents into folders automatically
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Markdown Editor -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Content
|
||||
</label>
|
||||
<div wire:ignore>
|
||||
<div x-data="markdownEditor()" x-init="initEditor()">
|
||||
<textarea
|
||||
x-ref="editor"
|
||||
class="w-full"
|
||||
>{{ $content }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" wire:model="content">
|
||||
</div>
|
||||
@error('content')
|
||||
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
|
||||
<!-- Auto-save indicator -->
|
||||
<div class="flex items-center justify-between text-sm text-gray-500">
|
||||
<div wire:loading wire:target="save" class="flex items-center">
|
||||
<svg class="animate-spin h-4 w-4 mr-2 text-indigo-600" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Saving...
|
||||
</div>
|
||||
|
||||
@if($isEditMode && $document)
|
||||
<div>
|
||||
Path: <code class="text-xs bg-gray-100 px-2 py-1 rounded">{{ $document->path }}</code>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@push('styles')
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('markdownEditor', () => ({
|
||||
editor: null,
|
||||
|
||||
initEditor() {
|
||||
this.$nextTick(() => {
|
||||
const textarea = this.$refs.editor;
|
||||
|
||||
this.editor = new EasyMDE({
|
||||
element: textarea,
|
||||
autofocus: true,
|
||||
spellChecker: false,
|
||||
autosave: {
|
||||
enabled: false,
|
||||
},
|
||||
placeholder: 'Write your markdown here...',
|
||||
toolbar: [
|
||||
'bold', 'italic', 'heading', '|',
|
||||
'quote', 'unordered-list', 'ordered-list', '|',
|
||||
'link', 'image', '|',
|
||||
'preview', 'side-by-side', 'fullscreen', '|',
|
||||
'guide'
|
||||
],
|
||||
status: ['lines', 'words', 'cursor'],
|
||||
});
|
||||
|
||||
// エディタの変更をLivewireに反映
|
||||
this.editor.codemirror.on('change', () => {
|
||||
// wire:ignoreの外にあるhidden inputを探す
|
||||
const formElement = this.$el.closest('form');
|
||||
const hiddenInput = formElement.querySelector('input[type="hidden"][wire\\:model="content"]');
|
||||
if (hiddenInput) {
|
||||
hiddenInput.value = this.editor.value();
|
||||
hiddenInput.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user