knowledge_base/src/resources/views/livewire/document-editor.blade.php

<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