.container-fluid.summary-documents-page .row .col-md-3 = render partial: "respondent_categories/sidebar" .col-md-9 = render_breadcrumbs([ \ { name: 'Home', path: projects_path }, \ { name: @project.title, path: project_path(@project) }, \ { name: @respondent_category.name, path: [@project, @respondent_category] }, \ { name: "Summary Documents", path: project_respondent_category_summary_documents_path(@project, @respondent_category) }, \ { name: @summary_document.name } \ ]) div v-cloak="" data-controller="summary-document-editor" .doc-header div .doc-header-title = @summary_document.name .doc-header-meta span.status-dot :class="conflict || error ? '' : (saving ? 'editing' : (savedAt ? 'saved' : 'editing'))" span v-if="savedAt" | Saved at {{ savedAt.toLocaleTimeString() }} span v-else="" | Editing... .d-flex.gap-2 button.btn-pill.btn-pill-light type="button" @click="goBack" | Back button.btn-pill.btn-pill-primary type="button" :disabled="saving" @click="save" span v-if="saving" | Saving... span v-else="" | Save .doc-banner.doc-banner-danger v-if="error" | {{ error }} .doc-banner.doc-banner-warning v-if="conflict" span.status-dot :class="statusDotClass" | Someone else saved changes while you were away. Your edits below are unsaved. .d-flex.gap-2.flex-shrink-0 button.btn-pill.btn-pill-light type="button" @click="dismissConflict" | Keep mine button.btn-pill.btn-pill-warning type="button" @click="discardAndReloadLatest" | Load latest .editor-toolbar button.toolbar-btn type="button" :class="{ active: editor?.isActive('bold') }" @click="editor.chain().focus().toggleBold().run()" title="Bold" i.bi.bi-type-bold button.toolbar-btn type="button" :class="{ active: editor?.isActive('italic') }" @click="editor.chain().focus().toggleItalic().run()" title="Italic" i.bi.bi-type-italic button.toolbar-btn type="button" :class="{ active: editor?.isActive('underline') }" @click="editor.chain().focus().toggleUnderline().run()" title="Underline" i.bi.bi-type-underline button.toolbar-btn type="button" :class="{ active: editor?.isActive('strike') }" @click="editor.chain().focus().toggleStrike().run()" title="Strikethrough" i.bi.bi-type-strikethrough button.toolbar-btn type="button" :class="{ active: editor?.isActive('highlight') }" @click="editor.chain().focus().toggleHighlight().run()" title="Highlight" i.bi.bi-highlighter .toolbar-divider .custom-dropdown button.toolbar-btn.dropdown-btn :class="{ active: !!currentFontSize() }" type="button" @click.stop="toggleFontSizeMenu" title="Font size" | {{ fontSizeLabel() }} i.bi.bi-chevron-down.dropdown-caret .dropdown-panel v-if="fontSizeMenuOpen" button.dropdown-option type="button" v-for="size in [12, 14, 16, 18, 24, 32]" :key="size" :class="{ active: currentFontSize() === size + 'px' }" @click="setFontSize(size + 'px')" | {{ size }}px .dropdown-divider button.dropdown-option type="button" :class="{ active: !currentFontSize() }" @click="setFontSize('')" | Default .toolbar-divider .custom-dropdown button.toolbar-btn.dropdown-btn :class="{ active: !!activeHeadingLevel() }" type="button" @click.stop="toggleHeadingMenu" title="Paragraph style" | {{ headingLabel() }} i.bi.bi-chevron-down.dropdown-caret .dropdown-panel v-if="headingMenuOpen" button.dropdown-option type="button" v-for="level in [1, 2, 3, 4, 5, 6]" :key="level" :class="{ active: activeHeadingLevel() === level }" @click="setHeading(level)" | H {{ level }} .dropdown-divider button.dropdown-option type="button" :class="{ active: !activeHeadingLevel() }" @click="setParagraph" | Text .toolbar-divider .custom-dropdown button.toolbar-btn.dropdown-btn :class="{ active: isAlignActive() }" type="button" @click.stop="toggleAlignMenu" title="Text align" i.bi :class="alignIcon()" i.bi.bi-chevron-down.dropdown-caret .dropdown-panel v-if="alignMenuOpen" button.dropdown-option type="button" v-for="align in ['left', 'center', 'right', 'justify']" :key="align" :class="{ active: activeAlign() === align }" @click="setAlign(align)" i.bi.me-2 :class="{ left: 'bi-text-left', center: 'bi-text-center', right: 'bi-text-right', justify: 'bi-justify' }[align]" | {{ align.charAt(0).toUpperCase() + align.slice(1) }} .toolbar-divider button.toolbar-btn type="button" :class="{ active: editor?.isActive('subscript') }" @click="toggleSubscript" title="Subscript" | X₂ button.toolbar-btn type="button" :class="{ active: editor?.isActive('superscript') }" @click="toggleSuperscript" title="Superscript" | X² .toolbar-divider button.toolbar-btn type="button" :class="{ active: editor?.isActive('bulletList') }" @click="editor.chain().focus().toggleBulletList().run()" title="Bulleted list" i.bi.bi-list-ul button.toolbar-btn type="button" :class="{ active: editor?.isActive('orderedList') }" @click="editor.chain().focus().toggleOrderedList().run()" title="Numbered list" i.bi.bi-list-ol button.toolbar-btn type="button" :class="{ active: editor?.isActive('blockquote') }" @click="editor.chain().focus().toggleBlockquote().run()" title="Quote" i.bi.bi-quote button.toolbar-btn type="button" :class="{ active: editor?.isActive('link') }" @click="setLink" title="Link" i.bi.bi-link-45deg .toolbar-divider / button.toolbar-btn type="button" :class="{ active: editor?.isActive('code') }" @click="editor.chain().focus().toggleCode().run()" title="Inline code" / i.bi.bi-code / button.toolbar-btn type="button" :class="{ active: editor?.isActive('codeBlock') }" @click="editor.chain().focus().toggleCodeBlock().run()" title="Code block" / i.bi.bi-code-square button.toolbar-btn type="button" @click="editor.chain().focus().setHorizontalRule().run()" title="Divider" i.bi.bi-hr .toolbar-divider button.toolbar-btn type="button" @click="editor.chain().focus().undo().run()" title="Undo" i.bi.bi-arrow-counterclockwise button.toolbar-btn type="button" @click="editor.chain().focus().redo().run()" title="Redo" i.bi.bi-arrow-clockwise .toolbar-divider button.toolbar-btn type="button" :disabled="saving" @click="save" title="Save (Ctrl+S)" i.bi.bi-floppy v-if="!saving" i.bi.bi-hourglass-split v-if="saving" .editor-card editor-content :editor="editor" class="summary-doc-content"