編輯器
Editor Indent
toolbar 縮排按鈕；段落、標題、清單層級。
安裝
Terminal
pnpm dlx shadcn-vue add @admin/editor-indentimport { createIndentHandlers, Indent } from '@/registry/admin/ui/editor-indent'list 縮排可用 Tab / Shift-Tab（StarterKit）。本包補段落縮排：Indent extension 為 paragraph / heading 加上 data-indent；createIndentHandlers 含 indent／outdent handler，list 內走 sinkListItem／liftListItem，段落走 data-indent。
用法
<script setup lang="ts">import type { JSONContent } from '@tiptap/core'import type { EditorToolbarItem } from '@/components/admin/editor-toolbar'import { IconIndentDecrease, IconIndentIncrease } from '@tabler/icons-vue'import { ref } from 'vue'import { cn } from '@/lib/utils'import { baseProseClass } from '@/components/admin/editor'import { createIndentHandlers, editorIndentClass, Indent } from '@/components/admin/editor-indent'import { AdminEditorToolbar, defaultEditorItems } from '@/components/admin/editor-toolbar'import { AdminRichEditor, starterKitProseClass } from '@/components/admin/rich-editor'const value = ref<JSONContent | string>( '<h2>段落縮排</h2><p>選取這段,點 toolbar 的增加縮排鈕。</p><p>list 縮排仍可直接用 Tab / Shift-Tab。</p><ul><li>清單項目(Tab 縮排)</li></ul>')// opt-in：注入 Indent extension + 注入成對的 indent/outdent handler(dual-mode)const extensions = [Indent]const handlers = createIndentHandlers()// 預設 toolbar（無縮排鈕）後面 append indent/outdentconst items: EditorToolbarItem[][] = [ ...defaultEditorItems, [ { kind: 'outdent', icon: IconIndentDecrease, label: '減少縮排', tooltip: { text: '減少縮排' } }, { kind: 'indent', icon: IconIndentIncrease, label: '增加縮排', tooltip: { text: '增加縮排' } } ]]</script><template> <admin-rich-editor v-slot="{ editor, handlers: mergedHandlers }" v-model="value" :extensions="extensions" :handlers="handlers" :ui="{ base: cn(baseProseClass, starterKitProseClass, editorIndentClass) }" > <admin-editor-toolbar :editor :handlers="mergedHandlers" :items="items" /> </admin-rich-editor></template><script setup lang="ts">import type { EditorToolbarItem } from '@/registry/admin/ui/editor-toolbar'import { IconIndentDecrease, IconIndentIncrease } from '@tabler/icons-vue'import { ref } from 'vue'import { createIndentHandlers, Indent } from '@/registry/admin/ui/editor-indent'import { AdminEditorToolbar, defaultEditorItems } from '@/registry/admin/ui/editor-toolbar'import { AdminRichEditor } from '@/registry/admin/ui/rich-editor'const value = ref('<p>段落內容</p>')const extensions = [Indent]const handlers = createIndentHandlers()const items: EditorToolbarItem[][] = [ ...defaultEditorItems, [ { kind: 'outdent', icon: IconIndentDecrease, label: '減少縮排', tooltip: { text: '減少縮排' } }, { kind: 'indent', icon: IconIndentIncrease, label: '增加縮排', tooltip: { text: '增加縮排' } } ]]</script><template> <admin-rich-editor v-model="value" :extensions="extensions" :handlers="handlers"> <admin-editor-toolbar :items="items" /> </admin-rich-editor></template>啟用後：
paragraph/heading縮排寫成data-indent="<n>"（0–7，0 時省略 attribute）- 同一顆 indent / outdent 按鈕，在 list 內縮排 list item、在段落調整
data-indent - 縮到頂（7）或底（0）時按鈕自動 disabled
- 段落縮排不綁
Tab（避免劫持鍵盤焦點切換）；list 的Tab/Shift-Tab仍由 StarterKit 處理
樣式自套
data-indent 的視覺（左邊距）不內含於 registry，由使用者依需求自套 content class：
const indentContentClass = ` [&_[data-indent='1']]:ml-[2rem] [&_[data-indent='2']]:ml-[4rem] /* …依級距 3–7 類推 */`API 參考
Indent：tiptap extension，為paragraph/heading補indent（0–7）attribute（序列化為data-indent），並提供段落的indent/outdentcommandcreateIndentHandlers(): { indent, outdent }：成對的 indent / outdent handler，經<AdminRichEditor :handlers>注入