diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000000000000000000000000000000000000..c53b94a85f7b32e0d11e681ac520f1b02618d2e6
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+# indent_size = 4
+end_of_line = crlf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false
\ No newline at end of file
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000000000000000000000000000000000000..3409e40978e4903bd71fd80f75dfd3a856ba61c5
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,2 @@
+@tiptap-pro:registry=https://registry.tiptap.dev/
+//registry.tiptap.dev/:_authToken=QH7amVsLHNpIXmKzd+v+g7uqpSiy0stZxw42ZCJD6NW5j6/EKxDWvtgC6pGpqePZ
\ No newline at end of file
diff --git a/components.d.ts b/components.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cd6772f9c6dfb0926f1c81c19ded532bf7f47580
--- /dev/null
+++ b/components.d.ts
@@ -0,0 +1,161 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    ColorPicker: typeof import('./src/components_umo/color-picker.vue')['default']
+    Icon: typeof import('./src/components_umo/icon.vue')['default']
+    MenusBlock: typeof import('./src/components_umo/menus/block/index.vue')['default']
+    MenusBubble: typeof import('./src/components_umo/menus/bubble/index.vue')['default']
+    MenusBubbleCodeCopy: typeof import('./src/components_umo/menus/bubble/code/copy.vue')['default']
+    MenusBubbleCodeLanguages: typeof import('./src/components_umo/menus/bubble/code/languages.vue')['default']
+    MenusBubbleCodeLineNumbers: typeof import('./src/components_umo/menus/bubble/code/line-numbers.vue')['default']
+    MenusBubbleCodeThemes: typeof import('./src/components_umo/menus/bubble/code/themes.vue')['default']
+    MenusBubbleCodeWordWrap: typeof import('./src/components_umo/menus/bubble/code/word-wrap.vue')['default']
+    MenusBubbleFileDownload: typeof import('./src/components_umo/menus/bubble/file/download.vue')['default']
+    MenusBubbleImageDownload: typeof import('./src/components_umo/menus/bubble/image/download.vue')['default']
+    MenusBubbleImageDraggable: typeof import('./src/components_umo/menus/bubble/image/draggable.vue')['default']
+    MenusBubbleImageEdit: typeof import('./src/components_umo/menus/bubble/image/edit.vue')['default']
+    MenusBubbleImageFlip: typeof import('./src/components_umo/menus/bubble/image/flip.vue')['default']
+    MenusBubbleImagePreview: typeof import('./src/components_umo/menus/bubble/image/preview.vue')['default']
+    MenusBubbleImageProportion: typeof import('./src/components_umo/menus/bubble/image/proportion.vue')['default']
+    MenusBubbleImageRemoveBackground: typeof import('./src/components_umo/menus/bubble/image/remove-background.vue')['default']
+    MenusBubbleImageReset: typeof import('./src/components_umo/menus/bubble/image/reset.vue')['default']
+    MenusBubbleImageRotate: typeof import('./src/components_umo/menus/bubble/image/rotate.vue')['default']
+    MenusBubbleNodeDelete: typeof import('./src/components_umo/menus/bubble/node-delete.vue')['default']
+    MenusButton: typeof import('./src/components_umo/menus/button.vue')['default']
+    MenusToolbarBaseAlignCenter: typeof import('./src/components_umo/menus/toolbar/base/align-center.vue')['default']
+    MenusToolbarBaseAlignDistributed: typeof import('./src/components_umo/menus/toolbar/base/align-distributed.vue')['default']
+    MenusToolbarBaseAlignDropdown: typeof import('./src/components_umo/menus/toolbar/base/align-dropdown.vue')['default']
+    MenusToolbarBaseAlignJustify: typeof import('./src/components_umo/menus/toolbar/base/align-justify.vue')['default']
+    MenusToolbarBaseAlignLeft: typeof import('./src/components_umo/menus/toolbar/base/align-left.vue')['default']
+    MenusToolbarBaseAlignRight: typeof import('./src/components_umo/menus/toolbar/base/align-right.vue')['default']
+    MenusToolbarBaseBackgroundColor: typeof import('./src/components_umo/menus/toolbar/base/background-color.vue')['default']
+    MenusToolbarBaseBold: typeof import('./src/components_umo/menus/toolbar/base/bold.vue')['default']
+    MenusToolbarBaseBulletList: typeof import('./src/components_umo/menus/toolbar/base/bullet-list.vue')['default']
+    MenusToolbarBaseClearFormat: typeof import('./src/components_umo/menus/toolbar/base/clear-format.vue')['default']
+    MenusToolbarBaseCode: typeof import('./src/components_umo/menus/toolbar/base/code.vue')['default']
+    MenusToolbarBaseColor: typeof import('./src/components_umo/menus/toolbar/base/color.vue')['default']
+    MenusToolbarBaseFontFamily: typeof import('./src/components_umo/menus/toolbar/base/font-family.vue')['default']
+    MenusToolbarBaseFontSize: typeof import('./src/components_umo/menus/toolbar/base/font-size.vue')['default']
+    MenusToolbarBaseFormatPaint: typeof import('./src/components_umo/menus/toolbar/base/format-paint.vue')['default']
+    MenusToolbarBaseHeading: typeof import('./src/components_umo/menus/toolbar/base/heading.vue')['default']
+    MenusToolbarBaseHighlight: typeof import('./src/components_umo/menus/toolbar/base/highlight.vue')['default']
+    MenusToolbarBaseIndent: typeof import('./src/components_umo/menus/toolbar/base/indent.vue')['default']
+    MenusToolbarBaseItalic: typeof import('./src/components_umo/menus/toolbar/base/italic.vue')['default']
+    MenusToolbarBaseLineHeight: typeof import('./src/components_umo/menus/toolbar/base/line-height.vue')['default']
+    MenusToolbarBaseMarkdown: typeof import('./src/components_umo/menus/toolbar/base/markdown.vue')['default']
+    MenusToolbarBaseOrderedList: typeof import('./src/components_umo/menus/toolbar/base/ordered-list.vue')['default']
+    MenusToolbarBaseOutdent: typeof import('./src/components_umo/menus/toolbar/base/outdent.vue')['default']
+    MenusToolbarBasePrint: typeof import('./src/components_umo/menus/toolbar/base/print.vue')['default']
+    MenusToolbarBaseQuote: typeof import('./src/components_umo/menus/toolbar/base/quote.vue')['default']
+    MenusToolbarBaseRedo: typeof import('./src/components_umo/menus/toolbar/base/redo.vue')['default']
+    MenusToolbarBaseSearchReplace: typeof import('./src/components_umo/menus/toolbar/base/search-replace.vue')['default']
+    MenusToolbarBaseSelectAll: typeof import('./src/components_umo/menus/toolbar/base/select-all.vue')['default']
+    MenusToolbarBaseStrike: typeof import('./src/components_umo/menus/toolbar/base/strike.vue')['default']
+    MenusToolbarBaseSubscript: typeof import('./src/components_umo/menus/toolbar/base/subscript.vue')['default']
+    MenusToolbarBaseSuperscript: typeof import('./src/components_umo/menus/toolbar/base/superscript.vue')['default']
+    MenusToolbarBaseTaskList: typeof import('./src/components_umo/menus/toolbar/base/task-list.vue')['default']
+    MenusToolbarBaseUnderline: typeof import('./src/components_umo/menus/toolbar/base/underline.vue')['default']
+    MenusToolbarBaseUndo: typeof import('./src/components_umo/menus/toolbar/base/undo.vue')['default']
+    MenusToolbarExportEmbed: typeof import('./src/components_umo/menus/toolbar/export/embed.vue')['default']
+    MenusToolbarExportHtml: typeof import('./src/components_umo/menus/toolbar/export/html.vue')['default']
+    MenusToolbarExportImage: typeof import('./src/components_umo/menus/toolbar/export/image.vue')['default']
+    MenusToolbarExportPdf: typeof import('./src/components_umo/menus/toolbar/export/pdf.vue')['default']
+    MenusToolbarExportShare: typeof import('./src/components_umo/menus/toolbar/export/share.vue')['default']
+    MenusToolbarExportText: typeof import('./src/components_umo/menus/toolbar/export/text.vue')['default']
+    MenusToolbarInsertAudio: typeof import('./src/components_umo/menus/toolbar/insert/audio.vue')['default']
+    MenusToolbarInsertCodeBlock: typeof import('./src/components_umo/menus/toolbar/insert/code-block.vue')['default']
+    MenusToolbarInsertDate: typeof import('./src/components_umo/menus/toolbar/insert/date.vue')['default']
+    MenusToolbarInsertDetails: typeof import('./src/components_umo/menus/toolbar/insert/details.vue')['default']
+    MenusToolbarInsertEmoji: typeof import('./src/components_umo/menus/toolbar/insert/emoji.vue')['default']
+    MenusToolbarInsertFile: typeof import('./src/components_umo/menus/toolbar/insert/file.vue')['default']
+    MenusToolbarInsertHardBreak: typeof import('./src/components_umo/menus/toolbar/insert/hard-break.vue')['default']
+    MenusToolbarInsertHorizontalLine: typeof import('./src/components_umo/menus/toolbar/insert/horizontal-line.vue')['default']
+    MenusToolbarInsertImage: typeof import('./src/components_umo/menus/toolbar/insert/image.vue')['default']
+    MenusToolbarInsertLink: typeof import('./src/components_umo/menus/toolbar/insert/link.vue')['default']
+    MenusToolbarInsertMathematics: typeof import('./src/components_umo/menus/toolbar/insert/mathematics.vue')['default']
+    MenusToolbarInsertSpecialCharacters: typeof import('./src/components_umo/menus/toolbar/insert/special-characters.vue')['default']
+    MenusToolbarInsertTemplate: typeof import('./src/components_umo/menus/toolbar/insert/template.vue')['default']
+    MenusToolbarInsertTextBox: typeof import('./src/components_umo/menus/toolbar/insert/text-box.vue')['default']
+    MenusToolbarInsertToc: typeof import('./src/components_umo/menus/toolbar/insert/toc.vue')['default']
+    MenusToolbarInsertVideo: typeof import('./src/components_umo/menus/toolbar/insert/video.vue')['default']
+    MenusToolbarInsertWebPage: typeof import('./src/components_umo/menus/toolbar/insert/web-page.vue')['default']
+    MenusToolbarPageBackground: typeof import('./src/components_umo/menus/toolbar/page/background.vue')['default']
+    MenusToolbarPageBreak: typeof import('./src/components_umo/menus/toolbar/page/break.vue')['default']
+    MenusToolbarPageBreakMarks: typeof import('./src/components_umo/menus/toolbar/page/break-marks.vue')['default']
+    MenusToolbarPageFooter: typeof import('./src/components_umo/menus/toolbar/page/footer.vue')['default']
+    MenusToolbarPageHeader: typeof import('./src/components_umo/menus/toolbar/page/header.vue')['default']
+    MenusToolbarPageLineNumber: typeof import('./src/components_umo/menus/toolbar/page/line-number.vue')['default']
+    MenusToolbarPageMargin: typeof import('./src/components_umo/menus/toolbar/page/margin.vue')['default']
+    MenusToolbarPageOrientation: typeof import('./src/components_umo/menus/toolbar/page/orientation.vue')['default']
+    MenusToolbarPagePreview: typeof import('./src/components_umo/menus/toolbar/page/preview.vue')['default']
+    MenusToolbarPageSize: typeof import('./src/components_umo/menus/toolbar/page/size.vue')['default']
+    MenusToolbarPageToggleToc: typeof import('./src/components_umo/menus/toolbar/page/toggle-toc.vue')['default']
+    MenusToolbarPageWatermark: typeof import('./src/components_umo/menus/toolbar/page/watermark.vue')['default']
+    MenusToolbarTableAddColumnAfter: typeof import('./src/components_umo/menus/toolbar/table/add-column-after.vue')['default']
+    MenusToolbarTableAddColumnBefore: typeof import('./src/components_umo/menus/toolbar/table/add-column-before.vue')['default']
+    MenusToolbarTableAddRowAfter: typeof import('./src/components_umo/menus/toolbar/table/add-row-after.vue')['default']
+    MenusToolbarTableAddRowBefore: typeof import('./src/components_umo/menus/toolbar/table/add-row-before.vue')['default']
+    MenusToolbarTableBorderColor: typeof import('./src/components_umo/menus/toolbar/table/border-color.vue')['default']
+    MenusToolbarTableCellsAlign: typeof import('./src/components_umo/menus/toolbar/table/cells-align.vue')['default']
+    MenusToolbarTableCellsBackground: typeof import('./src/components_umo/menus/toolbar/table/cells-background.vue')['default']
+    MenusToolbarTableDelete: typeof import('./src/components_umo/menus/toolbar/table/delete.vue')['default']
+    MenusToolbarTableDeleteColumn: typeof import('./src/components_umo/menus/toolbar/table/delete-column.vue')['default']
+    MenusToolbarTableDeleteRow: typeof import('./src/components_umo/menus/toolbar/table/delete-row.vue')['default']
+    MenusToolbarTableFix: typeof import('./src/components_umo/menus/toolbar/table/fix.vue')['default']
+    MenusToolbarTableInsert: typeof import('./src/components_umo/menus/toolbar/table/insert.vue')['default']
+    MenusToolbarTableMergeCells: typeof import('./src/components_umo/menus/toolbar/table/merge-cells.vue')['default']
+    MenusToolbarTableNextCell: typeof import('./src/components_umo/menus/toolbar/table/next-cell.vue')['default']
+    MenusToolbarTablePreviousCell: typeof import('./src/components_umo/menus/toolbar/table/previous-cell.vue')['default']
+    MenusToolbarTableSplitCell: typeof import('./src/components_umo/menus/toolbar/table/split-cell.vue')['default']
+    MenusToolbarTableToggleHeaderCell: typeof import('./src/components_umo/menus/toolbar/table/toggle-header-cell.vue')['default']
+    MenusToolbarTableToggleHeaderColumn: typeof import('./src/components_umo/menus/toolbar/table/toggle-header-column.vue')['default']
+    MenusToolbarTableToggleHeaderRow: typeof import('./src/components_umo/menus/toolbar/table/toggle-header-row.vue')['default']
+    MenusToolbarToolsBarcode: typeof import('./src/components_umo/menus/toolbar/tools/barcode.vue')['default']
+    MenusToolbarToolsChineseCase: typeof import('./src/components_umo/menus/toolbar/tools/chinese-case.vue')['default']
+    MenusToolbarToolsDiagrams: typeof import('./src/components_umo/menus/toolbar/tools/diagrams.vue')['default']
+    MenusToolbarToolsMermaid: typeof import('./src/components_umo/menus/toolbar/tools/mermaid.vue')['default']
+    MenusToolbarToolsMindMap: typeof import('./src/components_umo/menus/toolbar/tools/mind-map.vue')['default']
+    MenusToolbarToolsQrcode: typeof import('./src/components_umo/menus/toolbar/tools/qrcode.vue')['default']
+    MenusToolbarToolsSeal: typeof import('./src/components_umo/menus/toolbar/tools/seal.vue')['default']
+    MenusToolbarToolsSignature: typeof import('./src/components_umo/menus/toolbar/tools/signature.vue')['default']
+    Modal: typeof import('./src/components_umo/modal.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Statusbar: typeof import('./src/components_umo/statusbar/index.vue')['default']
+    StatusbarShortcuts: typeof import('./src/components_umo/statusbar/shortcuts.vue')['default']
+    TButton: typeof import('tdesign-vue-next/esm')['Button']
+    TCheckbox: typeof import('tdesign-vue-next/esm')['Checkbox']
+    TColorPickerPanel: typeof import('tdesign-vue-next/esm')['ColorPickerPanel']
+    TConfigProvider: typeof import('tdesign-vue-next/esm')['ConfigProvider']
+    TDialog: typeof import('tdesign-vue-next/esm')['Dialog']
+    TDivider: typeof import('tdesign-vue-next/esm')['Divider']
+    TDropdown: typeof import('tdesign-vue-next/esm')['Dropdown']
+    TDropdownItem: typeof import('tdesign-vue-next/esm')['DropdownItem']
+    TDropdownMenu: typeof import('tdesign-vue-next/esm')['DropdownMenu']
+    TForm: typeof import('tdesign-vue-next/esm')['Form']
+    TFormItem: typeof import('tdesign-vue-next/esm')['FormItem']
+    TImageViewer: typeof import('tdesign-vue-next/esm')['ImageViewer']
+    TInput: typeof import('tdesign-vue-next/esm')['Input']
+    TInputNumber: typeof import('tdesign-vue-next/esm')['InputNumber']
+    TLoading: typeof import('tdesign-vue-next/esm')['Loading']
+    Toolbar: typeof import('./src/components_umo/toolbar/index.vue')['default']
+    ToolbarClassic: typeof import('./src/components_umo/toolbar/classic.vue')['default']
+    ToolbarRibbon: typeof import('./src/components_umo/toolbar/ribbon.vue')['default']
+    ToolbarScrollable: typeof import('./src/components_umo/toolbar/scrollable.vue')['default']
+    ToolbarSource: typeof import('./src/components_umo/toolbar/source.vue')['default']
+    Tooltip: typeof import('./src/components_umo/tooltip.vue')['default']
+    TOption: typeof import('tdesign-vue-next/esm')['Option']
+    TOptionGroup: typeof import('tdesign-vue-next/esm')['OptionGroup']
+    TPopup: typeof import('tdesign-vue-next/esm')['Popup']
+    TSelect: typeof import('tdesign-vue-next/esm')['Select']
+    TSlider: typeof import('tdesign-vue-next/esm')['Slider']
+    TTextarea: typeof import('tdesign-vue-next/esm')['Textarea']
+    TTooltip: typeof import('tdesign-vue-next/esm')['Tooltip']
+  }
+}
diff --git a/imports.d.ts b/imports.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6956ae6dbd999814fb26b51cd6b45a7ebf6b542b
--- /dev/null
+++ b/imports.d.ts
@@ -0,0 +1,294 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
+  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const computed: typeof import('vue')['computed']
+  const computedAsync: typeof import('@vueuse/core')['computedAsync']
+  const computedEager: typeof import('@vueuse/core')['computedEager']
+  const computedInject: typeof import('@vueuse/core')['computedInject']
+  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
+  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
+  const controlledRef: typeof import('@vueuse/core')['controlledRef']
+  const createApp: typeof import('vue')['createApp']
+  const createEventHook: typeof import('@vueuse/core')['createEventHook']
+  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
+  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
+  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+  const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
+  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
+  const customRef: typeof import('vue')['customRef']
+  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
+  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+  const effectScope: typeof import('vue')['effectScope']
+  const extendRef: typeof import('@vueuse/core')['extendRef']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
+  const inject: typeof import('vue')['inject']
+  const injectLocal: typeof import('@vueuse/core')['injectLocal']
+  const isDefined: typeof import('@vueuse/core')['isDefined']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
+  const onLongPress: typeof import('@vueuse/core')['onLongPress']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
+  const provide: typeof import('vue')['provide']
+  const provideLocal: typeof import('@vueuse/core')['provideLocal']
+  const reactify: typeof import('@vueuse/core')['reactify']
+  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
+  const reactive: typeof import('vue')['reactive']
+  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
+  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
+  const reactivePick: typeof import('@vueuse/core')['reactivePick']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
+  const refDebounced: typeof import('@vueuse/core')['refDebounced']
+  const refDefault: typeof import('@vueuse/core')['refDefault']
+  const refThrottled: typeof import('@vueuse/core')['refThrottled']
+  const refWithControl: typeof import('@vueuse/core')['refWithControl']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveRef: typeof import('@vueuse/core')['resolveRef']
+  const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const syncRef: typeof import('@vueuse/core')['syncRef']
+  const syncRefs: typeof import('@vueuse/core')['syncRefs']
+  const templateRef: typeof import('@vueuse/core')['templateRef']
+  const throttledRef: typeof import('@vueuse/core')['throttledRef']
+  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
+  const toRaw: typeof import('vue')['toRaw']
+  const toReactive: typeof import('@vueuse/core')['toReactive']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
+  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
+  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
+  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
+  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
+  const unref: typeof import('vue')['unref']
+  const unrefElement: typeof import('@vueuse/core')['unrefElement']
+  const until: typeof import('@vueuse/core')['until']
+  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useAlert: typeof import('./src/composables/dialog.js')['useAlert']
+  const useAnimate: typeof import('@vueuse/core')['useAnimate']
+  const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
+  const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
+  const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
+  const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
+  const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
+  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
+  const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
+  const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
+  const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
+  const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
+  const useArraySome: typeof import('@vueuse/core')['useArraySome']
+  const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
+  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
+  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useBase64: typeof import('@vueuse/core')['useBase64']
+  const useBattery: typeof import('@vueuse/core')['useBattery']
+  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
+  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
+  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
+  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
+  const useCached: typeof import('@vueuse/core')['useCached']
+  const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
+  const useCloned: typeof import('@vueuse/core')['useCloned']
+  const useColorMode: typeof import('@vueuse/core')['useColorMode']
+  const useConfirm: typeof import('./src/composables/dialog.js')['useConfirm']
+  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useCounter: typeof import('@vueuse/core')['useCounter']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVar: typeof import('@vueuse/core')['useCssVar']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
+  const useCycleList: typeof import('@vueuse/core')['useCycleList']
+  const useDark: typeof import('@vueuse/core')['useDark']
+  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
+  const useDebounce: typeof import('@vueuse/core')['useDebounce']
+  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
+  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
+  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
+  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
+  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
+  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
+  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
+  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
+  const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
+  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
+  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
+  const useElementHover: typeof import('@vueuse/core')['useElementHover']
+  const useElementSize: typeof import('@vueuse/core')['useElementSize']
+  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
+  const useEventBus: typeof import('@vueuse/core')['useEventBus']
+  const useEventListener: typeof import('@vueuse/core')['useEventListener']
+  const useEventSource: typeof import('@vueuse/core')['useEventSource']
+  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
+  const useFavicon: typeof import('@vueuse/core')['useFavicon']
+  const useFetch: typeof import('@vueuse/core')['useFetch']
+  const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
+  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
+  const useFocus: typeof import('@vueuse/core')['useFocus']
+  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
+  const useFps: typeof import('@vueuse/core')['useFps']
+  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
+  const useGamepad: typeof import('@vueuse/core')['useGamepad']
+  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useHotkeys: typeof import('./src/composables/hotkeys.js')['useHotkeys']
+  const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useImage: typeof import('@vueuse/core')['useImage']
+  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
+  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
+  const useInterval: typeof import('@vueuse/core')['useInterval']
+  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
+  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
+  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
+  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
+  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
+  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
+  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
+  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
+  const useMemoize: typeof import('@vueuse/core')['useMemoize']
+  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useMessage: typeof import('./src/composables/dialog.js')['useMessage']
+  const useMounted: typeof import('@vueuse/core')['useMounted']
+  const useMouse: typeof import('@vueuse/core')['useMouse']
+  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
+  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
+  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
+  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
+  const useNetwork: typeof import('@vueuse/core')['useNetwork']
+  const useNow: typeof import('@vueuse/core')['useNow']
+  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
+  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
+  const useOnline: typeof import('@vueuse/core')['useOnline']
+  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
+  const useParallax: typeof import('@vueuse/core')['useParallax']
+  const useParentElement: typeof import('@vueuse/core')['useParentElement']
+  const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
+  const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
+  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
+  const usePopup: typeof import('./src/composables/popup.js')['usePopup']
+  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
+  const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
+  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
+  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
+  const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
+  const usePrevious: typeof import('@vueuse/core')['usePrevious']
+  const useRafFn: typeof import('@vueuse/core')['useRafFn']
+  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
+  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
+  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
+  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
+  const useScroll: typeof import('@vueuse/core')['useScroll']
+  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
+  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
+  const useShare: typeof import('@vueuse/core')['useShare']
+  const useSlots: typeof import('vue')['useSlots']
+  const useSorted: typeof import('@vueuse/core')['useSorted']
+  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
+  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
+  const useState: typeof import('./src/composables/state.js')['useState']
+  const useStepper: typeof import('@vueuse/core')['useStepper']
+  const useStorage: typeof import('@vueuse/core')['useStorage']
+  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
+  const useStore: typeof import('./src/composables/store.js')['useStore']
+  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
+  const useSupported: typeof import('@vueuse/core')['useSupported']
+  const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
+  const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
+  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
+  const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
+  const useThrottle: typeof import('@vueuse/core')['useThrottle']
+  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
+  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
+  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
+  const useTimeout: typeof import('@vueuse/core')['useTimeout']
+  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
+  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
+  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
+  const useTitle: typeof import('@vueuse/core')['useTitle']
+  const useToNumber: typeof import('@vueuse/core')['useToNumber']
+  const useToString: typeof import('@vueuse/core')['useToString']
+  const useToggle: typeof import('@vueuse/core')['useToggle']
+  const useTransition: typeof import('@vueuse/core')['useTransition']
+  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
+  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
+  const useVModel: typeof import('@vueuse/core')['useVModel']
+  const useVModels: typeof import('@vueuse/core')['useVModels']
+  const useVibrate: typeof import('@vueuse/core')['useVibrate']
+  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
+  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
+  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
+  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
+  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
+  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
+  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
+  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
+  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
+  const watch: typeof import('vue')['watch']
+  const watchArray: typeof import('@vueuse/core')['watchArray']
+  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
+  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
+  const watchDeep: typeof import('@vueuse/core')['watchDeep']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
+  const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
+  const watchOnce: typeof import('@vueuse/core')['watchOnce']
+  const watchPausable: typeof import('@vueuse/core')['watchPausable']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
+  const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
+  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
+  const whenever: typeof import('@vueuse/core')['whenever']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}
diff --git a/package.json b/package.json
index cd65ee10ec3d8988c1a8cf93cd14553803111695..38c1517a3c2f52dc4915e383467ce5f09347deae 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,9 @@
   },
   "dependencies": {
     "@hocuspocus/provider": "^2.9.0",
+    "@imgly/background-removal": "^1.4.5",
     "@manuscripts/prosemirror-recreate-steps": "^0.1.4",
-    "@tiptap/extension-blockquote": "^2.2.3",
+    "@tiptap/extension-blockquote": "^2.5.5",
     "@tiptap/extension-bold": "^2.2.3",
     "@tiptap/extension-bubble-menu": "^2.2.3",
     "@tiptap/extension-bullet-list": "^2.2.3",
@@ -35,14 +36,14 @@
     "@tiptap/extension-collaboration-cursor": "^2.2.3",
     "@tiptap/extension-color": "^2.2.3",
     "@tiptap/extension-document": "^2.2.3",
-    "@tiptap/extension-dropcursor": "^2.2.3",
+    "@tiptap/extension-dropcursor": "^2.5.5",
     "@tiptap/extension-floating-menu": "^2.2.3",
-    "@tiptap/extension-font-family": "^2.2.3",
+    "@tiptap/extension-font-family": "^2.5.5",
     "@tiptap/extension-gapcursor": "^2.2.3",
     "@tiptap/extension-hard-break": "^2.2.3",
     "@tiptap/extension-heading": "^2.2.3",
     "@tiptap/extension-highlight": "^2.2.3",
-    "@tiptap/extension-history": "^2.2.3",
+    "@tiptap/extension-history": "^2.5.5",
     "@tiptap/extension-horizontal-rule": "^2.2.3",
     "@tiptap/extension-image": "^2.2.3",
     "@tiptap/extension-italic": "^2.2.3",
@@ -53,8 +54,8 @@
     "@tiptap/extension-paragraph": "^2.2.3",
     "@tiptap/extension-placeholder": "^2.2.3",
     "@tiptap/extension-strike": "^2.2.3",
-    "@tiptap/extension-subscript": "^2.2.3",
-    "@tiptap/extension-superscript": "^2.2.3",
+    "@tiptap/extension-subscript": "^2.5.5",
+    "@tiptap/extension-superscript": "^2.5.5",
     "@tiptap/extension-table": "^2.2.3",
     "@tiptap/extension-table-cell": "^2.2.3",
     "@tiptap/extension-table-header": "^2.2.3",
@@ -71,6 +72,7 @@
     "@tiptap/starter-kit": "^2.2.3",
     "@tiptap/suggestion": "^2.2.3",
     "@tiptap/vue-3": "^2.2.3",
+    "@vitejs/plugin-vue": "^5.0.5",
     "buffer-image-size": "^0.6.4",
     "core-js": "^3.8.3",
     "daisyui": "^3.2.1",
@@ -78,6 +80,7 @@
     "diff": "^5.1.0",
     "docx": "^8.5.0",
     "file-saver": "^2.0.5",
+    "jsbarcode": "^3.11.6",
     "mitt": "^3.0.0",
     "print-js": "^1.6.0",
     "prosemirror-virtual-cursor": "^0.3.5",
@@ -86,17 +89,20 @@
     "register-service-worker": "^1.7.2",
     "rfc6902": "^5.0.1",
     "rollup-plugin-copy": "^3.4.0",
+    "svg64": "^2.0.0",
     "ts-lint": "^4.5.1",
     "ts-loader": "^9.4.2",
     "ts-morph": "^17.0.1",
     "uuid": "^9.0.0",
     "v-calendar": "^3.0.0-alpha.8",
     "v-contextmenu": "^3.0.0",
+    "vite": "^5.3.4",
     "vite-plugin-dts": "^1.2.1",
     "vite-plugin-wasm": "^3.2.2",
     "vite-svg-loader": "^3.1.2",
-    "vue": "^3.2.5",
+    "vue": "^3.4.27",
     "vue-class-component": "^8.0.0-0",
+    "vue-esign": "^1.1.4",
     "vue-file-toolbar-menu": "^2.2.0",
     "vue-i18n": "^9.9.0",
     "vue-inline-svg": "^2.1.3",
@@ -131,6 +137,7 @@
     "babel-jest": "^27.0.6",
     "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^6.7.3",
+    "dom-to-image-more": "^3.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
@@ -147,6 +154,7 @@
     "ts-jest": "^27.0.4",
     "typescript": "~4.5.5",
     "vite": "^3.2.5",
-    "vite-plugin-top-level-await": "^1.3.1"
+    "vite-plugin-top-level-await": "^1.3.1",
+    "vue": "^3.4.27"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 0cc4b092552269ead6724bd5fc147569a0a5edff..82c94acaf4e1c5964385d38bd95db580c30a2229 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="navbar">
+  <!-- <div class="navbar">
     <div class="navbar-start">
       <div class="avatar">
         <div class="w-10 rounded-full">
@@ -53,18 +53,8 @@
         </li>
       </ul>
     </div>
-  </div>
+  </div> -->
   <router-view />
-  <footer class="footer p-10 bg-neutral text-neutral-content">
-    <div>
-      <svg width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" class="fill-current">
-        <path
-          d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"
-        ></path>
-      </svg>
-      <p>编辑器 348040933@qq.com</p>
-    </div>
-  </footer>
 </template>
 
 <script lang="ts">
diff --git a/src/assets/icons/align-center.svg b/src/assets/icons/align-center.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4fcd406824630d4eb6de5df82983bdc3daee37ec
--- /dev/null
+++ b/src/assets/icons/align-center.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><path d="M1.75 2.25h12.504M4.754 8h6.496m-9.5 5.75h12.504" stroke-linecap="round" fill="none" vector-effect="non-scaling-stroke" stroke="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/align-distributed.svg b/src/assets/icons/align-distributed.svg
new file mode 100644
index 0000000000000000000000000000000000000000..13235af06c7e3a862f6b2e51a6ba4c1708c42de3
--- /dev/null
+++ b/src/assets/icons/align-distributed.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><path d="M1.75 9.834h12.504M1.75 13.75h12.504M14.254 4.25l-2-2m2 2l-2 2m2-2H1.8m2-2l-2 2m0 0l2 2" stroke-linecap="round" fill="none" vector-effect="non-scaling-stroke" stroke="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/align-justify.svg b/src/assets/icons/align-justify.svg
new file mode 100644
index 0000000000000000000000000000000000000000..74e67c9381b0d2e11d4f02f5a207909a06708138
--- /dev/null
+++ b/src/assets/icons/align-justify.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><path d="M1.75 2.25h12.504M1.75 8h12.504M1.75 13.75h12.504" stroke-linecap="round" fill="none" vector-effect="non-scaling-stroke" stroke="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/align-left.svg b/src/assets/icons/align-left.svg
new file mode 100644
index 0000000000000000000000000000000000000000..329cfda5e264436f443963c68ae273df0d2fc772
--- /dev/null
+++ b/src/assets/icons/align-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><path d="M1.75 2.25h12.504M1.75 8h6.496M1.75 13.75h12.504" stroke-linecap="round" fill="none" vector-effect="non-scaling-stroke" stroke="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/align-right.svg b/src/assets/icons/align-right.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8fcdbf8679f6538a30bfaa3701d3ff8093929958
--- /dev/null
+++ b/src/assets/icons/align-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><path d="M1.75 2.25h12.504M7.754 8h6.496m-12.5 5.75h12.504" stroke-linecap="round" fill="none" vector-effect="non-scaling-stroke" stroke="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/arrow-down.svg b/src/assets/icons/arrow-down.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8cd49e536cbb15fdd14b2e56b7afcae2358b231e
--- /dev/null
+++ b/src/assets/icons/arrow-down.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36 18L24 30 12 18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/audio.svg b/src/assets/icons/audio.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5b8a1965da1c7cb5d5780f1eb710b4aa156d2df8
--- /dev/null
+++ b/src/assets/icons/audio.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="16" y="4" width="16" height="28" rx="8" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 21v3c0 7.732 6.268 14 14 14s14-6.268 14-14v-3M24 5v6M16 16h5M27 16h5M16 22h5M27 22h5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 38v6" stroke="currentColor" stroke-width="3"/><path d="M16 44h16" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/auto-width.svg b/src/assets/icons/auto-width.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a19a8df916667d8442354225a80580dc45ff3177
--- /dev/null
+++ b/src/assets/icons/auto-width.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 7h36M8 24h32" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><path d="M13.99 30L8 24.005 14 18M34.01 18L40 23.995 34 30" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 41h36" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/background-color.svg b/src/assets/icons/background-color.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e92fc492b91786177a908c0d01c5f0bea4047ada
--- /dev/null
+++ b/src/assets/icons/background-color.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd"><rect x=".5" y=".5" width="23" height="23" rx="3"/><path stroke-linecap="round" stroke-linejoin="round" d="M12.167 5l-7.5 14m3-4.384h9M12.167 5l7.5 14"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/barcode.svg b/src/assets/icons/barcode.svg
new file mode 100644
index 0000000000000000000000000000000000000000..12bc50eb8e14eb67904a54487a9b014dad427281
--- /dev/null
+++ b/src/assets/icons/barcode.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 6H8a2 2 0 0 0-2 2v8m10 26H8a2 2 0 0 1-2-2v-8m26 10h8a2 2 0 0 0 2-2v-8M32 6h8a2 2 0 0 1 2 2v8m-18 0v16m8-16v16M16 16v16" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/block-add.svg b/src/assets/icons/block-add.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0c49d3fd290e2f3f271457ae1465fbe2b28f9d2f
--- /dev/null
+++ b/src/assets/icons/block-add.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.06 10l-.036 28M10 24h28" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/block-menu.svg b/src/assets/icons/block-menu.svg
new file mode 100644
index 0000000000000000000000000000000000000000..86336337e37f31b78a8941e52b01acc6182a8c79
--- /dev/null
+++ b/src/assets/icons/block-menu.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 10a4 4 0 1 1-8 0 4 4 0 0 1 8 0zm-4 18a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 14a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM37 10a4 4 0 1 1-8 0 4 4 0 0 1 8 0zm-4 18a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 14a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/bold.svg b/src/assets/icons/bold.svg
new file mode 100644
index 0000000000000000000000000000000000000000..27572c60de8e7a0267dfb313ec2bf35f24a53df2
--- /dev/null
+++ b/src/assets/icons/bold.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><path d="M3.25 7.75h5.5a3 3 0 1 0 0-6h-4a1.5 1.5 0 0 0-1.5 1.5v4.5zm0 0H9.5a3.25 3.25 0 0 1 0 6.5H4.75a1.5 1.5 0 0 1-1.5-1.5v-5z" fill="none" vector-effect="non-scaling-stroke" stroke="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/break-marks.svg b/src/assets/icons/break-marks.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ea1a3460d76583fa079e43fd3a8d38db2c564d97
--- /dev/null
+++ b/src/assets/icons/break-marks.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 4v40M42 4v40M18 26l-4 4 4 4" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 30h13a6 6 0 0 0 0-12H14" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/bullet-list-2.svg b/src/assets/icons/bullet-list-2.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c9805ce43c31b030509957db436c3efb7e1b6048
--- /dev/null
+++ b/src/assets/icons/bullet-list-2.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 42a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM9 14a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM9 28a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path d="M21 24h22M21 38h22M21 10h22" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/bullet-list-circle.svg b/src/assets/icons/bullet-list-circle.svg
new file mode 100644
index 0000000000000000000000000000000000000000..777146fbc37f58d6fbbe9add7c1c782206a8f828
--- /dev/null
+++ b/src/assets/icons/bullet-list-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><path d="M35 29a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17z" fill-opacity=".163"/><path d="M11 27a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm0 1a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0-10a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm0 1a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0-10a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm0 1a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/bullet-list-disc.svg b/src/assets/icons/bullet-list-disc.svg
new file mode 100644
index 0000000000000000000000000000000000000000..be4f4d787eeb665ea0bf21a3a82a611e7629eff6
--- /dev/null
+++ b/src/assets/icons/bullet-list-disc.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><path d="M35 29a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17z" fill-opacity=".163"/><path d="M11 27a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm0-9a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm0-9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/bullet-list-square.svg b/src/assets/icons/bullet-list-square.svg
new file mode 100644
index 0000000000000000000000000000000000000000..31d1ba2450e3613596f833c217dfd208f9d4d90b
--- /dev/null
+++ b/src/assets/icons/bullet-list-square.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><path d="M35 29a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17z" fill-opacity=".163"/><path d="M14 27v6H8v-6h6zm0-9v6H8v-6h6zm0-9v6H8V9h6z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/bullet-list.svg b/src/assets/icons/bullet-list.svg
new file mode 100644
index 0000000000000000000000000000000000000000..40520ba1312707926eef666d4bbba0d6619047a5
--- /dev/null
+++ b/src/assets/icons/bullet-list.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><path d="M5.734 7.747h8.5m-8.5 5.5h8.5M5.734 2.25h8.5" stroke-linecap="round" fill="none" vector-effect="non-scaling-stroke" stroke="currentColor"/><g fill="var(--umo-primary-color)" fill-rule="evenodd" clip-rule="evenodd"><path d="M2.25 3.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5zM3.5 7.748a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0zM2.25 14.496a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/chinese-case.svg b/src/assets/icons/chinese-case.svg
new file mode 100644
index 0000000000000000000000000000000000000000..55dd0772742b21316647a5fc3dc87e69699aac99
--- /dev/null
+++ b/src/assets/icons/chinese-case.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M38 10L10 38M6 6l6 8 6-8M5 14h14M5 20h14M12 14v12M32.846 26H42v16H22v-5.85" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/clear-cache.svg b/src/assets/icons/clear-cache.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3e52a401b8ff66c3afef073454e53b028d484f24
--- /dev/null
+++ b/src/assets/icons/clear-cache.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20z" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M33.542 27c-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7v6M33.542 15v6c-1.274-4.057-5.064-7-9.542-7-4.477 0-8.268 2.943-9.542 7" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/clear-format.svg b/src/assets/icons/clear-format.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3293d4791c324c470811e9dcff3264fa4d76b7ea
--- /dev/null
+++ b/src/assets/icons/clear-format.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><g stroke="currentColor" fill="none"><path d="M13.83 6.061l-3.37-3.37a1.5 1.5 0 0 0-2.121 0L2.223 8.807a1.5 1.5 0 0 0 0 2.122l3.322 3.322h2.218l6.068-6.068a1.5 1.5 0 0 0 0-2.122zM3.922 6.63l6.081 6.081" vector-effect="non-scaling-stroke"/><path d="M6 14.25h8.25" stroke-linecap="round" vector-effect="non-scaling-stroke"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg
new file mode 100644
index 0000000000000000000000000000000000000000..94a5a3453c88c2c4d71fbcb51dd232088563fae0
--- /dev/null
+++ b/src/assets/icons/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/code-block.svg b/src/assets/icons/code-block.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a8bd95a27d08758f9fd9b5b636d7bc709647fa8b
--- /dev/null
+++ b/src/assets/icons/code-block.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23 40H7a3 3 0 0 1-3-3V11a3 3 0 0 1 3-3h34a3 3 0 0 1 3 3v14.882" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 11a3 3 0 0 1 3-3h34a3 3 0 0 1 3 3v9H4v-9z" stroke="currentColor" stroke-width="3"/><path d="M34 33l-4 4 4 4m6-8l4 4-4 4" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><circle r="2" transform="matrix(0 -1 -1 0 10 14)" fill="currentColor"/><circle r="2" transform="matrix(0 -1 -1 0 16 14)" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/code-line-number.svg b/src/assets/icons/code-line-number.svg
new file mode 100644
index 0000000000000000000000000000000000000000..59efb355cb974a210fb535448664eae219345020
--- /dev/null
+++ b/src/assets/icons/code-line-number.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 4v9M12 13H6M12 27H6M6 20s3-3 5 0-5 7-5 7M6 34.5s2-3 5-1 0 4.5 0 4.5 3 2.5 0 4.5-5-1-5-1M11 38H9M9 4L6 6M21 24h22M21 38h22M21 10h22" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/code-word-wrap.svg b/src/assets/icons/code-word-wrap.svg
new file mode 100644
index 0000000000000000000000000000000000000000..15dfe920fb064b93f2b690d67e3a940b6313b38d
--- /dev/null
+++ b/src/assets/icons/code-word-wrap.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9h36M6 19h36M6 29h18M6 39h10M24 39h13a5 5 0 0 0 0-10h-5m-8 10l4-4m-4 4l4 4" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/code.svg b/src/assets/icons/code.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2ad4950d9b6f71a0fe2679b83ecf275c2ebfdc4f
--- /dev/null
+++ b/src/assets/icons/code.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 13L4 25.432 16 37m16-24l12 12.432L32 37" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M28 4l-7 40" stroke="currentColor" stroke-width="4" stroke-linecap="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/color.svg b/src/assets/icons/color.svg
new file mode 100644
index 0000000000000000000000000000000000000000..694393cc61c8bd4a16d328033eb0ba6abb573326
--- /dev/null
+++ b/src/assets/icons/color.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12.5 2.5L4 21.5m3.4-6.045h10.2M12.5 2.5l8.5 19"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/copy.svg b/src/assets/icons/copy.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fdf58881fe962d0befe5c35d571a4424632ce56b
--- /dev/null
+++ b/src/assets/icons/copy.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 38h28V16H30V4H13v34zM30 4l11 12" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 20v24h21" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M19 20h4M19 28h12" stroke="currentColor" stroke-width="4" stroke-linecap="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/date.svg b/src/assets/icons/date.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ed005d340dbdf2fa7ff6618ee3ae286e1452efc0
--- /dev/null
+++ b/src/assets/icons/date.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="3" stroke-linejoin="round" d="M4 8h40v36H4z"/><path clip-rule="evenodd" d="M28 20v14h8V20h-8z" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M17 4v8m14-8v8m-19 8h8v14h-8m8-7h-6" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/diagrams.svg b/src/assets/icons/diagrams.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a7031e24cf9792bfa565c723f840fa5e9e7c6635
--- /dev/null
+++ b/src/assets/icons/diagrams.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M40.99 8.027H12.182C9.455 8.027 4 9.55 4 15.967 4 22.384 9.455 24 12.182 24h23.812C38.72 24 44 25.568 44 31.985c0 6.416-5.279 8.018-8.006 8.018H6.065" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.046 35.993l-3.979 4.066L8.046 44M38.043 3.954L42.02 8.02l-3.978 3.941" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/download.svg b/src/assets/icons/download.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0da116920b506ab9d34e47d0a5c5f063f9fe644f
--- /dev/null
+++ b/src/assets/icons/download.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 24.008V42h36V24" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M33 23l-9 9-9-9M23.992 6v26" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/edit.svg b/src/assets/icons/edit.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8ff42ea3c202227256d718610eb2907963663315
--- /dev/null
+++ b/src/assets/icons/edit.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.325 43.5h8.485l31.113-31.113-8.486-8.485L5.325 35.015V43.5z" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/><path d="M27.952 12.387l8.485 8.485" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/embed.svg b/src/assets/icons/embed.svg
new file mode 100644
index 0000000000000000000000000000000000000000..31835bfc34bbc67fcf2d7e922a12853ece02e1f8
--- /dev/null
+++ b/src/assets/icons/embed.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="8" width="40" height="32" rx="3" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path d="M4 11a3 3 0 0 1 3-3h34a3 3 0 0 1 3 3v9H4v-9z" stroke="currentColor" stroke-width="3"/><circle r="2" transform="matrix(0 -1 -1 0 10 14)" fill="currentColor"/><circle r="2" transform="matrix(0 -1 -1 0 16 14)" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/emoji.svg b/src/assets/icons/emoji.svg
new file mode 100644
index 0000000000000000000000000000000000000000..75f90ff518fc8084dffa16f138acc9b3e003ecc7
--- /dev/null
+++ b/src/assets/icons/emoji.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path d="M31 18v1M17 18v1M31 31s-2 4-7 4-7-4-7-4" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/equal-proportion.svg b/src/assets/icons/equal-proportion.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c7a2bb771b49236dba28a431b4881b294d9bd1ba
--- /dev/null
+++ b/src/assets/icons/equal-proportion.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M42 7H6a2 2 0 0 0-2 2v30a2 2 0 0 0 2 2h36a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z" stroke="currentColor" stroke-width="4"/><path d="M12 20.58L16 18v12M31 20.58L35 18v12" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 20v1M24 27v1" stroke="currentColor" stroke-width="4" stroke-linecap="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/exit.svg b/src/assets/icons/exit.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ce90f766b61c628fecee9734558308fdb815b430
--- /dev/null
+++ b/src/assets/icons/exit.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.992 6H6v36h18M33 33l9-9-9-9M16 23.992h26" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/expand-down.svg b/src/assets/icons/expand-down.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b24e4dbd8999733a6a80eb5135a1256d163085ec
--- /dev/null
+++ b/src/assets/icons/expand-down.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9h36M6 19h36M6 26l18 14 18-14" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/file.svg b/src/assets/icons/file.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4663dee9dd02bcdf932ebdfb6d088052ed2ed1f3
--- /dev/null
+++ b/src/assets/icons/file.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 44H38C39.1046 44 40 43.1046 40 42V14H30V4H10C8.89543 4 8 4.89543 8 6V42C8 43.1046 8.89543 44 10 44Z" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M30 4L40 14" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 21V35" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M17 28H24L31 28" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/font-size-decrease.svg b/src/assets/icons/font-size-decrease.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8611810437307923b5a6be9966656e371fbabb1f
--- /dev/null
+++ b/src/assets/icons/font-size-decrease.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><path d="M2 13.5l1.422-3.412m0 0l3.301-7.923a.3.3 0 0 1 .554 0l3.301 7.923m-7.156 0h7.156m0 0L12 13.5" stroke-linecap="round" fill="none" vector-effect="non-scaling-stroke" stroke="currentColor"/><path d="M11.043 2.75h3.173" stroke-linecap="round" fill="none" vector-effect="non-scaling-stroke" stroke="var(--umo-primary-color)"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/font-size-increase.svg b/src/assets/icons/font-size-increase.svg
new file mode 100644
index 0000000000000000000000000000000000000000..35c11ffa3ec51bdddb690e959903ae62e05700d9
--- /dev/null
+++ b/src/assets/icons/font-size-increase.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><path d="M2 13.5l1.422-3.412m0 0l3.301-7.923a.3.3 0 0 1 .554 0l3.301 7.923m-7.156 0h7.156m0 0L12 13.5" stroke-linecap="round" fill="none" vector-effect="non-scaling-stroke" stroke="currentColor"/><path d="M11 2.75h3.476M12.75 4.549V1" stroke-linecap="round" fill="none" vector-effect="non-scaling-stroke" stroke="var(--umo-primary-color)"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/format-paint.svg b/src/assets/icons/format-paint.svg
new file mode 100644
index 0000000000000000000000000000000000000000..734d6e4610b73a5408a7dd946183944fdcde97f8
--- /dev/null
+++ b/src/assets/icons/format-paint.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><path d="M6.543 3.961s-1.03 1.203-2.494 1.892c-1.006.473-2.181.585-2.734.626-.2.015-.344.21-.277.398.293.82 1.112 2.801 2.658 4.347 2.126 2.126 3.659 2.968 4.142 3.202.1.048.215.03.299-.04.385-.326 1.5-1.278 2.21-1.987.891-.89 2.186-2.447 2.186-2.447m.48.055a.3.3 0 0 1-.425 0L6.325 3.743a.3.3 0 0 1 0-.424l.68-.68a1.5 1.5 0 0 1 2.121 0l1.357 1.356 1.604-2.02a1.629 1.629 0 1 1 2.279 2.295L12.34 5.853l1.353 1.352a1.5 1.5 0 0 1 0 2.121l-.68.68z" stroke-linecap="round" fill="none" vector-effect="non-scaling-stroke" stroke="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/format.svg b/src/assets/icons/format.svg
new file mode 100644
index 0000000000000000000000000000000000000000..87805cd0eb47ea1aced5ba40542ff4916363dabb
--- /dev/null
+++ b/src/assets/icons/format.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="8" y="24" width="32" height="18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 13H18V6H30V13H44V24H4V13Z" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 32L16 42" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/full-screen-exit.svg b/src/assets/icons/full-screen-exit.svg
new file mode 100644
index 0000000000000000000000000000000000000000..66f503df8d8408a80f562b7a01472d7bac1ebbfa
--- /dev/null
+++ b/src/assets/icons/full-screen-exit.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M33 6V15H42" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 6V15H6" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 42V33H6" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M33 42V33H41.8995" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/full-screen.svg b/src/assets/icons/full-screen.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9bfd5951f3103d904ded28413dd3f0656d26057d
--- /dev/null
+++ b/src/assets/icons/full-screen.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M33 6H42V15" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M42 33V42H33" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 42H6V33" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 15V6H15" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/hard-break.svg b/src/assets/icons/hard-break.svg
new file mode 100644
index 0000000000000000000000000000000000000000..32be71c2a547576ee051b7fec656d1a86aa8ab50
--- /dev/null
+++ b/src/assets/icons/hard-break.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9h36M6 19h36M6 29h18M6 39h10M24 39h13a5 5 0 0 0 0-10h-5m-8 10l4-4m-4 4l4 4" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/heading.svg b/src/assets/icons/heading.svg
new file mode 100644
index 0000000000000000000000000000000000000000..86e8f47248ba811486d49e126ad7a63d7112d5fd
--- /dev/null
+++ b/src/assets/icons/heading.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v38M36 5v38M12 24h24" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/help.svg b/src/assets/icons/help.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c5eaf2255524d5d9faa4e6d0d6b70f9265522f38
--- /dev/null
+++ b/src/assets/icons/help.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44a19.937 19.937 0 0 0 14.142-5.858A19.937 19.937 0 0 0 44 24a19.938 19.938 0 0 0-5.858-14.142A19.937 19.937 0 0 0 24 4 19.938 19.938 0 0 0 9.858 9.858 19.938 19.938 0 0 0 4 24a19.937 19.937 0 0 0 5.858 14.142A19.938 19.938 0 0 0 24 44z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path d="M24 28.625v-4a6 6 0 1 0-6-6" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M24 37.625a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/hide-toolbar.svg b/src/assets/icons/hide-toolbar.svg
new file mode 100644
index 0000000000000000000000000000000000000000..870a2c77f6cdd9e228744e7d49b4b10e74dd6c3d
--- /dev/null
+++ b/src/assets/icons/hide-toolbar.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="6" width="36" height="36" rx="3" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M6 16H42" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 32L24 28L28 32" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 10V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M42 10V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/highlight.svg b/src/assets/icons/highlight.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c90f327ed890f614454a459e4d07226a51843efe
--- /dev/null
+++ b/src/assets/icons/highlight.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 44V25h6v-8h24v8h6v19H6z" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/><path d="M17 17V8l14-4v13" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/home-page.svg b/src/assets/icons/home-page.svg
new file mode 100644
index 0000000000000000000000000000000000000000..41ebd69cc840f4772db0040d2b29edb1c8198d8a
--- /dev/null
+++ b/src/assets/icons/home-page.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 24h40" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path clip-rule="evenodd" d="M24 44c4.418 0 8-8.954 8-20S28.418 4 24 4s-8 8.954-8 20 3.582 20 8 20z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.858 10.142A19.937 19.937 0 0 0 24 16a19.937 19.937 0 0 0 14.142-5.858M38.142 37.858A19.937 19.937 0 0 0 24 32a19.937 19.937 0 0 0-14.142 5.858" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/horizontal-line.svg b/src/assets/icons/horizontal-line.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6f8d7e5e4effb4babf47fd7cc013c079cb84aa67
--- /dev/null
+++ b/src/assets/icons/horizontal-line.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 24h38M21 38h6M37 38h6M21 10h6M5 38h6M5 10h6M37 10h6" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/html5.svg b/src/assets/icons/html5.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d484d2a6f01c08f9a7f0ba8f3771d0a2935cbf8e
--- /dev/null
+++ b/src/assets/icons/html5.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M37.804 5H10.196a2 2 0 0 0-1.991 2.187l2.688 28.666a2 2 0 0 0 1.153 1.63l11.116 5.13a2 2 0 0 0 1.676 0l11.116-5.13a2 2 0 0 0 1.154-1.63l2.687-28.666A2 2 0 0 0 37.804 5z" stroke="currentColor" stroke-width="3"/><path d="M32 12H16l1 9h14l-1 11-6 3-6-3-.5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/image-download.svg b/src/assets/icons/image-download.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e3c50a411ced35b87eb75254f75f93affe57372e
--- /dev/null
+++ b/src/assets/icons/image-download.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 24a2 2 0 1 0-4 0h4zM24 8a2 2 0 1 0 0-4v4zm15 32H9v4h30v-4zM8 39V9H4v30h4zm32-15v15h4V24h-4zM9 8h15V4H9v4zm0 32a1 1 0 0 1-1-1H4a5 5 0 0 0 5 5v-4zm30 4a5 5 0 0 0 5-5h-4a1 1 0 0 1-1 1v4zM8 9a1 1 0 0 1 1-1V4a5 5 0 0 0-5 5h4z" fill="currentColor"/><path d="M6 35l10.693-9.802a2 2 0 0 1 2.653-.044L32 36M28 31l4.773-4.773a2 2 0 0 1 2.615-.186L42 31M32 13l5 5 5-5M37 6v12" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/image-draggable.svg b/src/assets/icons/image-draggable.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a525fea73b774a7f2772743cbaa2b757955bf0ca
--- /dev/null
+++ b/src/assets/icons/image-draggable.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.583 27.182C7.867 28.354 7.009 30.293 7.009 33c0 4.06 4.991 11 9.492 11h11.515c4.405 0 7.08-3.85 7.08-6.94V24.6a3.253 3.253 0 0 0-3.243-3.253 3.235 3.235 0 0 0-3.245 3.226v.11" stroke="#333" stroke-width="3" stroke-linecap="round"/><path d="M10.981 29.445V7.662a3.217 3.217 0 0 1 6.435 0v15.986" stroke="#333" stroke-width="3" stroke-linecap="round"/><path d="M17.416 24v-4.192a2.804 2.804 0 0 1 5.608 0v4.62" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M23 24.658v-2.85a2.804 2.804 0 0 1 5.608 0v3.195" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 8h30" stroke="#333" stroke-width="3" stroke-linecap="round"/><path d="M36 12.5l1.667-1.5L41 8l-3.333-3L36 3.5" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/image-failed.svg b/src/assets/icons/image-failed.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f8a2a827b5297cc870fcff00fb56be67844b2c4a
--- /dev/null
+++ b/src/assets/icons/image-failed.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="96" height="96"><path d="M480 164.571L580.571 376.87 461.824 512l158.5 193.06-79.25 154.369H73.143V164.57z" opacity=".12"/><path d="M566.857 164.571l99.109 212.444-118.547 134.948 159.16 193.354-79.58 154.112h323.858V164.57z" fill-opacity=".12"/><path d="M182.894 749.714v-85.357L315.209 525.75l157.312 132.206 56.759-63.744 90.917 110.884-22.803 44.617zm658.249 0H683.575l22.985-44.47-132.681-161.207 93.257-105.18 174.062 215.845z" fill-opacity=".12"/><path d="M255.99999999999997 347.429a73.143 73.143 0 1 0 146.286 0 73.143 73.143 0 1 0-146.286 0z" opacity=".12"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/image-flip.svg b/src/assets/icons/image-flip.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9fcb5530a69b2790b60d87edebc484b18961c7c9
--- /dev/null
+++ b/src/assets/icons/image-flip.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 6v36" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 34l12-22v22H4zM44 34H32V12l12 22z" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/image-preview.svg b/src/assets/icons/image-preview.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ad8bbb6e5ef66b6cc26200bfa16dc0a6b870fa09
--- /dev/null
+++ b/src/assets/icons/image-preview.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 24a2 2 0 1 0-4 0h4zM24 8a2 2 0 1 0 0-4v4zm15 32H9v4h30v-4zM8 39V9H4v30h4zm32-15v15h4V24h-4zM9 8h15V4H9v4zm0 32a1 1 0 0 1-1-1H4a5 5 0 0 0 5 5v-4zm30 4a5 5 0 0 0 5-5h-4a1 1 0 0 1-1 1v4zM8 9a1 1 0 0 1 1-1V4a5 5 0 0 0-5 5h4z" fill="currentColor"/><path d="M6 35l10.693-9.802a2 2 0 0 1 2.653-.044L32 36M28 31l4.773-4.773a2 2 0 0 1 2.615-.186L42 31M30 12h12M36 6v12" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/image-remove-background.svg b/src/assets/icons/image-remove-background.svg
new file mode 100644
index 0000000000000000000000000000000000000000..04c0d42704848bb1f3a481ab3df84e0cd3b15a16
--- /dev/null
+++ b/src/assets/icons/image-remove-background.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 23.994a2 2 0 0 0-4 0h4zm-20-16a2 2 0 1 0 0-4v4zm15 32H9v4h30v-4zm-31-1v-30H4v30h4zm32-15v15h4v-15h-4zm-31-16h15v-4H9v4zm0 32a1 1 0 0 1-1-1H4a5 5 0 0 0 5 5v-4zm30 4a5 5 0 0 0 5-5h-4a1 1 0 0 1-1 1v4zm-31-35a1 1 0 0 1 1-1v-4a5 5 0 0 0-5 5h4z" fill="currentColor"/><path d="M6 35l10.693-9.802a2 2 0 0 1 2.653-.044L32 36M28 31l4.773-4.773a2 2 0 0 1 2.615-.186L42 31M33 7l8 8M41 7l-8 8" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/image-reset.svg b/src/assets/icons/image-reset.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1b73e746c56580d482a5165985f80a08f68ab189
--- /dev/null
+++ b/src/assets/icons/image-reset.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.272 36.728A17.943 17.943 0 0 0 24 42c9.941 0 18-8.059 18-18S33.941 6 24 6c-4.97 0-9.47 2.015-12.728 5.272C9.614 12.93 6 17 6 17" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 9v8h8" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/image-rotate.svg b/src/assets/icons/image-rotate.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8f5c45762898245d4014a64ed3d9f84c9b819ce3
--- /dev/null
+++ b/src/assets/icons/image-rotate.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 24h30v18H12V24z" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/><path d="M6 8v9h9" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M38.475 13.299C35.195 8.87 29.933 6 24 6c-5.821 0-10.997 2.763-14.287 7.05L6 17" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/image.svg b/src/assets/icons/image.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5ff0834f6a063a664036a4b2a974894c0d772ad9
--- /dev/null
+++ b/src/assets/icons/image.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M5 10a2 2 0 0 1 2-2h34a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V10z" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path clip-rule="evenodd" d="M14.5 18a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 24l5 4 6-7 17 13v4a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-4l10-10z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/indent.svg b/src/assets/icons/indent.svg
new file mode 100644
index 0000000000000000000000000000000000000000..272e37881bc67728a0942e9d00300efe1f5ded11
--- /dev/null
+++ b/src/assets/icons/indent.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><path d="M1.75 2.25h12.504M1.75 8h7.496M1.75 13.75h12.504" stroke-linecap="round" fill="none" vector-effect="non-scaling-stroke" stroke="currentColor"/><path d="M12.25 6l1.993 1.993a.01.01 0 0 1 0 .014L12.25 10" stroke-linecap="round" fill="none" vector-effect="non-scaling-stroke" stroke="var(--umo-primary-color)"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/italic.svg b/src/assets/icons/italic.svg
new file mode 100644
index 0000000000000000000000000000000000000000..76e4559486a0b4ca18c8ca6245cb10e14f819c48
--- /dev/null
+++ b/src/assets/icons/italic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><path d="M7.75 1.75h5.5M10.5 2l-5 12m-2.75.25h5.5" stroke-linecap="round" fill="none" vector-effect="non-scaling-stroke" stroke="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/laser-pointer.svg b/src/assets/icons/laser-pointer.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d0864b9617fb811616a67fbe7066b2bee4c14102
--- /dev/null
+++ b/src/assets/icons/laser-pointer.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#icon-d0aa15407eac28b)"><rect x="35.193" y="5.322" width="12" height="38" rx="6" transform="rotate(45 35.193 5.322)" stroke="currentColor" stroke-width="3"/><path d="M18 23l8 8M6 43l6-6" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><rect x="33.268" y="12.34" width="4" height="4" rx="2" transform="rotate(30 33.268 12.34)" fill="currentColor"/></g><defs><clipPath id="icon-d0aa15407eac28b"><path fill="currentColor" d="M0 0h48v48H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/src/assets/icons/line-height.svg b/src/assets/icons/line-height.svg
new file mode 100644
index 0000000000000000000000000000000000000000..34b86028d8c022df0bb36fd2578fc8bfa48357d1
--- /dev/null
+++ b/src/assets/icons/line-height.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><path d="M1.75 3.806l2-2.056 2 2.056m-2 10.144l-2-2.056m2 2.056l2-2.056m-2 2.056l.012-12.187" stroke-linecap="round" fill="none" vector-effect="non-scaling-stroke" stroke="var(--umo-primary-color)"/><g stroke="currentColor" fill="none" stroke-linecap="round"><path d="M8.754 13.75h5.5M8.754 9.75h5.5M8.754 5.75h5.5M8.75 1.75h5.504" vector-effect="non-scaling-stroke"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/line-number.svg b/src/assets/icons/line-number.svg
new file mode 100644
index 0000000000000000000000000000000000000000..75e3b68c9886badddb2c9911d43191fdad5e2557
--- /dev/null
+++ b/src/assets/icons/line-number.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 4v9M12 13H6M12 27H6M6 20s3-3 5 0-5 7-5 7M6 34.5s2-3 5-1 0 4.5 0 4.5 3 2.5 0 4.5-5-1-5-1M11 38H9M9 4L6 6M21 24h22M21 38h22M21 10h22" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/link.svg b/src/assets/icons/link.svg
new file mode 100644
index 0000000000000000000000000000000000000000..52e02c3b7c2730a510da9462442f1cf90b6ab01f
--- /dev/null
+++ b/src/assets/icons/link.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M26.24 16.373l-9.14-9.14c-2.661-2.661-7.035-2.603-9.768.131-2.734 2.734-2.793 7.107-.131 9.768l7.935 7.936M32.903 23.003l7.935 7.935c2.661 2.662 2.603 7.035-.13 9.769-2.735 2.734-7.108 2.792-9.77.13l-9.14-9.14M26.11 26.142c2.733-2.734 2.792-7.108.13-9.769M21.799 21.798c-2.734 2.734-2.792 7.108-.131 9.769" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/loading.svg b/src/assets/icons/loading.svg
new file mode 100644
index 0000000000000000000000000000000000000000..80ca487574a758a723439b53f86df75a0f5b805b
--- /dev/null
+++ b/src/assets/icons/loading.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 24c0 11.046 8.954 20 20 20s20-8.954 20-20S35.046 4 24 4" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/markdown.svg b/src/assets/icons/markdown.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2279836d46ca11a2220475e4482c34054aca7ea2
--- /dev/null
+++ b/src/assets/icons/markdown.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-spm-anchor-id="a313x.search_index.0.i0.3d203a817x9KY2" width="96" height="96" ><path stroke="currentColor" d="M896 192a64 64 0 0 1 64 64v512a64 64 0 0 1-64 64H128a64 64 0 0 1-64-64V256a64 64 0 0 1 64-64h768zm-768-64A128 128 0 0 0 0 256v512a128 128 0 0 0 128 128h768a128 128 0 0 0 128-128V256a128 128 0 0 0-128-128H128z" data-spm-anchor-id="a313x.search_index.0.i1.3d203a817x9KY2"/><path stroke="currentColor" d="M585.344 521.344a32 32 0 0 1 45.312 0L736 626.752l105.344-105.408a32.064 32.064 0 0 1 45.312 45.312l-128 128a31.872 31.872 0 0 1-45.312 0l-128-128a32 32 0 0 1 0-45.312z"/><path stroke="currentColor" d="M736 320a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0V352a32 32 0 0 1 32-32zM227.84 704V448.64h3.584l91.392 207.296h49.536l90.88-207.36h3.584V704h68.672V320.064h-76.8L349.248 569.28h-2.496l-109.44-249.216H160V704h67.84z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/mathematics.svg b/src/assets/icons/mathematics.svg
new file mode 100644
index 0000000000000000000000000000000000000000..986f6f070c7429247f26cde5e7da1074d8ee97a8
--- /dev/null
+++ b/src/assets/icons/mathematics.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M40 9l-3-3H8l18 18L8 42h29l3-3" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/menu.svg b/src/assets/icons/menu.svg
new file mode 100644
index 0000000000000000000000000000000000000000..260debae0c4b5e3e9f28978b7ac41328ecf7b860
--- /dev/null
+++ b/src/assets/icons/menu.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.95 11.95h32M7.95 23.95h32M7.95 35.95h32" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/mermaid.svg b/src/assets/icons/mermaid.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bbdaba8bc527bfeee2171012241334c18d8b3475
--- /dev/null
+++ b/src/assets/icons/mermaid.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M41 14L24 4 7 14v20l17 10 17-10V14z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path d="M16 18.998L23.993 24l8.002-5.002M24 24v9" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/message.svg b/src/assets/icons/message.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e0c1fb31dee62a90635a38b911d536e4e7faab4c
--- /dev/null
+++ b/src/assets/icons/message.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M43 5L29.7 43l-7.6-17.1L5 18.3 43 5z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path d="M43 5L22.1 25.9" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/mind-map.svg b/src/assets/icons/mind-map.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f0f328f822174c3d8cb986832d17e5e420a5eeb1
--- /dev/null
+++ b/src/assets/icons/mind-map.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 28a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM42 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM42 26a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM42 44a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path d="M32 6H20v36h12M12 24h20" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/minus.svg b/src/assets/icons/minus.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4ab2509be39da6d1d8ed55c6e4efd7b10562f564
--- /dev/null
+++ b/src/assets/icons/minus.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 24L38.5 24" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/node-add.svg b/src/assets/icons/node-add.svg
new file mode 100644
index 0000000000000000000000000000000000000000..dac483896d9ac92f412033d46629d4fdb07ae9ef
--- /dev/null
+++ b/src/assets/icons/node-add.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 30v-6M6 30h36v12H6V30zM6 12.5v-1M6 18v-1M6 7V6M42 12.5v-1M42 18v-1M42 7V6M42 18h-1M7 18H6M7 6H6M14 6h-1M21 6h-1M21 18h-1M28 6h-1M14 18h-1M28 18h-1M35 6h-1M35 18h-1M42 6h-1" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/node-delete-2.svg b/src/assets/icons/node-delete-2.svg
new file mode 100644
index 0000000000000000000000000000000000000000..db5da9524665de4a020264dea3245d97a354a159
--- /dev/null
+++ b/src/assets/icons/node-delete-2.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 10v34h30V10H9z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path d="M20 20v13M28 20v13M4 10h40" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 10l3.289-6h9.488L32 10H16z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/node-delete.svg b/src/assets/icons/node-delete.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d62dd485c16e2afb918ad1c43966321224d9874f
--- /dev/null
+++ b/src/assets/icons/node-delete.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 10v34h30V10H9z" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/><path d="M20 20v13M28 20v13M4 10h40" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 10l3.289-6h9.488L32 10H16z" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/ordered-list-2.svg b/src/assets/icons/ordered-list-2.svg
new file mode 100644
index 0000000000000000000000000000000000000000..75e3b68c9886badddb2c9911d43191fdad5e2557
--- /dev/null
+++ b/src/assets/icons/ordered-list-2.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 4v9M12 13H6M12 27H6M6 20s3-3 5 0-5 7-5 7M6 34.5s2-3 5-1 0 4.5 0 4.5 3 2.5 0 4.5-5-1-5-1M11 38H9M9 4L6 6M21 24h22M21 38h22M21 10h22" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/ordered-list-decimal-leading-zero.svg b/src/assets/icons/ordered-list-decimal-leading-zero.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8d756cbfccffbec20afe0fc5af4a7a0b0c5ef218
--- /dev/null
+++ b/src/assets/icons/ordered-list-decimal-leading-zero.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><path d="M35 29a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17z" fill-opacity=".163"/><path d="M5.714 15.11c.624 0 1.11-.22 1.46-.66.421-.533.632-1.408.632-2.627 0-1.222-.21-2.096-.629-2.624-.351-.445-.839-.668-1.463-.668-.624 0-1.11.22-1.459.66-.422.533-.633 1.406-.633 2.619 0 1.236.192 2.095.576 2.577.384.482.89.723 1.516.723zm0-1.024a.614.614 0 0 1-.398-.14c-.115-.094-.211-.283-.287-.565-.077-.283-.115-.802-.115-1.558s.043-1.294.128-1.613c.064-.246.155-.417.272-.512a.617.617 0 0 1 .4-.143.61.61 0 0 1 .398.143c.116.095.211.284.288.567.076.283.114.802.114 1.558s-.043 1.292-.128 1.608c-.064.246-.155.417-.272.512a.617.617 0 0 1-.4.143zm6.078.914V8.531H10.79c-.14.393-.4.736-.778 1.03-.378.295-.728.495-1.05.6v1.121a4.257 4.257 0 0 0 1.595-.936V15h1.235zm3.344 0v-1.235h-1.235V15h1.235zm-9.422 9.11c.624 0 1.11-.22 1.46-.66.421-.533.632-1.408.632-2.627 0-1.222-.21-2.096-.629-2.624-.351-.445-.839-.668-1.463-.668-.624 0-1.11.22-1.459.66-.422.533-.633 1.406-.633 2.619 0 1.236.192 2.095.576 2.577.384.482.89.723 1.516.723zm0-1.024a.614.614 0 0 1-.398-.14c-.115-.094-.211-.283-.287-.565-.077-.283-.115-.802-.115-1.558s.043-1.294.128-1.613c.064-.246.155-.417.272-.512a.617.617 0 0 1 .4-.143.61.61 0 0 1 .398.143c.116.095.211.284.288.567.076.283.114.802.114 1.558s-.043 1.292-.128 1.608c-.064.246-.155.417-.272.512a.617.617 0 0 1-.4.143zm7.088.914v-1.147H10.35c.065-.111.149-.226.253-.343.104-.117.35-.354.74-.712.39-.357.66-.631.81-.821.225-.288.39-.562.493-.824.104-.263.156-.539.156-.829 0-.51-.181-.936-.544-1.279-.364-.342-.863-.514-1.499-.514-.58 0-1.063.148-1.45.444-.387.296-.617.784-.69 1.463l1.23.124c.024-.36.112-.619.264-.774.152-.155.357-.233.615-.233.261 0 .465.074.613.222.148.148.222.36.222.635 0 .25-.085.501-.255.756-.126.185-.467.536-1.024 1.055-.691.641-1.154 1.156-1.388 1.544-.235.389-.375.8-.422 1.233h4.328zm2.334 0v-1.235h-1.235V24h1.235zM5.714 34.11c.624 0 1.11-.22 1.46-.66.421-.533.632-1.408.632-2.627 0-1.222-.21-2.096-.629-2.624-.351-.445-.839-.668-1.463-.668-.624 0-1.11.22-1.459.66-.422.533-.633 1.406-.633 2.619 0 1.236.192 2.095.576 2.577.384.482.89.723 1.516.723zm0-1.024a.614.614 0 0 1-.398-.14c-.115-.094-.211-.283-.287-.565-.077-.283-.115-.802-.115-1.558s.043-1.294.128-1.613c.064-.246.155-.417.272-.512a.617.617 0 0 1 .4-.143.61.61 0 0 1 .398.143c.116.095.211.284.288.567.076.283.114.802.114 1.558s-.043 1.292-.128 1.608c-.064.246-.155.417-.272.512a.617.617 0 0 1-.4.143zm4.992 1.024c.616 0 1.13-.2 1.543-.598.413-.398.62-.88.62-1.446 0-.39-.111-.722-.332-.997a1.5 1.5 0 0 0-.886-.532c.618-.337.927-.788.927-1.353 0-.399-.15-.756-.452-1.073-.366-.386-.853-.58-1.46-.58a2.25 2.25 0 0 0-.96.2 1.617 1.617 0 0 0-.667.55c-.16.232-.28.544-.359.933l1.139.194c.032-.282.123-.495.272-.642.15-.146.33-.22.54-.22.214 0 .386.065.515.194s.193.302.193.518c0 .255-.088.46-.264.613-.175.154-.43.227-.764.218l-.136 1.006c.22-.061.408-.092.566-.092.24 0 .444.09.611.272.167.182.25.428.25.739 0 .328-.086.589-.26.782a.833.833 0 0 1-.644.29.841.841 0 0 1-.607-.242c-.167-.16-.27-.394-.308-.698l-1.195.145c.062.542.284.98.668 1.316.384.335.867.503 1.45.503zm4.43-.11v-1.235h-1.235V34h1.235z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/ordered-list-decimal.svg b/src/assets/icons/ordered-list-decimal.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7a5e054158de9403aeda1a5c82bd9b74b2bab7af
--- /dev/null
+++ b/src/assets/icons/ordered-list-decimal.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><path d="M35 29a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17z" fill-opacity=".163"/><path d="M10.29 15V8.531H9.286c-.14.393-.4.736-.778 1.03-.378.295-.728.495-1.05.6v1.121a4.257 4.257 0 0 0 1.595-.936V15h1.235zm3.343 0v-1.235h-1.235V15h1.235zM11.3 24v-1.147H8.848c.064-.111.148-.226.252-.343.104-.117.351-.354.74-.712.39-.357.66-.631.81-.821.225-.288.39-.562.494-.824.104-.263.156-.539.156-.829 0-.51-.182-.936-.545-1.279-.363-.342-.863-.514-1.499-.514-.58 0-1.063.148-1.45.444-.387.296-.617.784-.69 1.463l1.23.124c.024-.36.112-.619.264-.774.153-.155.358-.233.616-.233.26 0 .465.074.613.222.148.148.222.36.222.635 0 .25-.085.501-.255.756-.126.185-.468.536-1.024 1.055-.692.641-1.155 1.156-1.389 1.544-.234.389-.375.8-.422 1.233H11.3zm2.333 0v-1.235h-1.235V24h1.235zM9.204 34.11c.615 0 1.129-.2 1.542-.598.413-.398.62-.88.62-1.446 0-.39-.11-.722-.332-.997a1.5 1.5 0 0 0-.886-.532c.619-.337.928-.788.928-1.353 0-.399-.151-.756-.453-1.073-.366-.386-.852-.58-1.459-.58a2.25 2.25 0 0 0-.96.2 1.617 1.617 0 0 0-.668.55c-.16.232-.28.544-.358.933l1.138.194c.032-.282.123-.495.272-.642.15-.146.33-.22.54-.22.215 0 .386.065.515.194s.193.302.193.518c0 .255-.087.46-.263.613-.176.154-.43.227-.765.218l-.136 1.006c.22-.061.409-.092.567-.092.24 0 .444.09.61.272.168.182.251.428.251.739 0 .328-.087.589-.261.782a.833.833 0 0 1-.644.29.841.841 0 0 1-.607-.242c-.167-.16-.27-.394-.307-.698l-1.196.145c.062.542.285.98.668 1.316.384.335.868.503 1.45.503zm4.43-.11v-1.235h-1.236V34h1.235z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/ordered-list-lower-latin.svg b/src/assets/icons/ordered-list-lower-latin.svg
new file mode 100644
index 0000000000000000000000000000000000000000..39c1b288b1c70f91838a119cb7f6fa30b86ce145
--- /dev/null
+++ b/src/assets/icons/ordered-list-lower-latin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><path d="M35 29a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17z" fill-opacity=".163"/><path d="M9.62 14.105c.272 0 .528-.05.768-.153s.466-.257.677-.462c.009.024.023.072.044.145.047.161.086.283.119.365h1.221a2.649 2.649 0 0 1-.222-.626c-.04-.195-.059-.498-.059-.908l.013-1.441c0-.536-.055-.905-.165-1.105-.11-.201-.3-.367-.569-.497-.27-.13-.68-.195-1.23-.195-.607 0-1.064.108-1.371.325-.308.217-.525.55-.65 1.002l1.12.202c.076-.217.176-.369.299-.455.123-.086.294-.13.514-.13.325 0 .546.05.663.152.118.101.176.27.176.508v.123c-.222.093-.622.194-1.2.303-.427.082-.755.178-.982.288-.227.11-.403.268-.53.474a1.327 1.327 0 0 0-.188.706c0 .398.138.728.415.988.277.261.656.391 1.136.391zm.368-.87a.675.675 0 0 1-.492-.189.606.606 0 0 1-.193-.448c0-.176.08-.32.241-.435.106-.07.33-.142.673-.215a7.19 7.19 0 0 0 .751-.19v.247c0 .296-.016.496-.048.602a.773.773 0 0 1-.295.409 1.07 1.07 0 0 1-.637.22zm4.645.765v-1.235h-1.235V14h1.235zM10.2 25.105c.542 0 1.003-.215 1.382-.646.38-.43.57-1.044.57-1.84 0-.771-.187-1.362-.559-1.774a1.82 1.82 0 0 0-1.41-.617c-.522 0-.973.216-1.354.65v-2.32H7.594V25h1.147v-.686a1.9 1.9 0 0 0 .67.592c.26.133.523.2.79.2zm-.299-.975c-.354 0-.638-.164-.852-.492-.153-.232-.229-.59-.229-1.073 0-.468.098-.818.295-1.048a.93.93 0 0 1 .738-.345c.302 0 .55.118.743.354.193.236.29.62.29 1.154 0 .5-.096.868-.288 1.1-.192.233-.424.35-.697.35zm4.478.87v-1.235h-1.234V25h1.234zm-4.017 9.105c.6 0 1.08-.142 1.437-.426.357-.284.599-.704.725-1.261l-1.213-.207c-.061.326-.167.555-.316.688a.832.832 0 0 1-.576.2.916.916 0 0 1-.75-.343c-.185-.228-.278-.62-.278-1.173 0-.498.091-.853.274-1.066.183-.212.429-.318.736-.318.232 0 .42.061.565.184.145.123.238.306.28.55l1.216-.22c-.146-.501-.387-.874-.722-1.119-.336-.244-.788-.366-1.356-.366-.695 0-1.245.214-1.653.643-.407.43-.61 1.03-.61 1.8 0 .762.202 1.358.608 1.788.406.431.95.646 1.633.646zM14.633 34v-1.235h-1.235V34h1.235z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/ordered-list-lower-roman.svg b/src/assets/icons/ordered-list-lower-roman.svg
new file mode 100644
index 0000000000000000000000000000000000000000..938831e568e36d6f3ed25682dd680505acde7172
--- /dev/null
+++ b/src/assets/icons/ordered-list-lower-roman.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><path d="M35 29a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17z" fill-opacity=".163"/><path d="M11.88 8.7V7.558h-1.234V8.7h1.234zm0 5.3V9.333h-1.234V14h1.234zm2.5 0v-1.235h-1.234V14h1.235zm-4.75 4.7v-1.142H8.395V18.7H9.63zm0 5.3v-4.667H8.395V24H9.63zm2.5-5.3v-1.142h-1.234V18.7h1.235zm0 5.3v-4.667h-1.234V24h1.235zm2.501 0v-1.235h-1.235V24h1.235zM7.38 28.7v-1.142H6.145V28.7H7.38zm0 5.3v-4.667H6.145V34H7.38zm2.5-5.3v-1.142H8.646V28.7H9.88zm0 5.3v-4.667H8.646V34H9.88zm2.5-5.3v-1.142h-1.234V28.7h1.235zm0 5.3v-4.667h-1.234V34h1.235zm2.501 0v-1.235h-1.235V34h1.235z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/ordered-list-simp-chinese-formal.svg b/src/assets/icons/ordered-list-simp-chinese-formal.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3e4dbfb6da0b65f8760e6e4d4997696d981ccef4
--- /dev/null
+++ b/src/assets/icons/ordered-list-simp-chinese-formal.svg
@@ -0,0 +1,2 @@
+
+<svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M36 29a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H19a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H19a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H19a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17z" fill-opacity=".163" fill="#000" fill-rule="nonzero"/><path d="M0 0h44v44H0z"/><g fill="#000" fill-rule="nonzero"><path d="M9.648 11.728v.624h4.704v-.624H9.648zm-.136.968v1.712h.816l.216.512H8.432v.696h7.128v-.696h-2.136l.248-.512h.816v-1.712H9.512zm1.872 2.224l-.216-.512h1.624l-.248.512h-1.16zm2.28-1.136h-3.328v-.48h3.328v.48zM8.696 8.816v.672H11.6v.328H9.2v.64h5.712v-.64H12.4v-.328h2.928v-.672H12.4v-.4h-.8v.4H8.696zm6.712 1.936H8.584v1.28h.768v-.624h5.288v.624h.768v-1.28zM8.36 18.16v.752h4.624c.032 1.232.128 2.312.272 3.232.264 1.728.712 2.608 1.344 2.64.48 0 .848-.624 1.112-1.856l-.696-.392c-.168.856-.304 1.288-.416 1.288-.128-.008-.288-.44-.48-1.288-.184-.912-.296-2.12-.336-3.624h1.808v-.752h-.44a4.676 4.676 0 0 0-.392-.776l-.72.264c.12.16.232.328.328.512h-.6c-.008-.248-.008-.504-.008-.776h-.8c0 .256 0 .512.008.776H8.36zm.72 1.032v.608h3.256v-.608H9.08zm-.448.888v.624h4.128v-.624H8.632zm3.936.936H8.832v2.424h.824v-1.784h2.088v1.72h.824v-2.36zm-1.264 2.336l-.472.584c.64.288 1.16.608 1.576.96l.544-.656a9.288 9.288 0 0 0-1.648-.888zm-1.016-1.408v.464c-.032.456-.168.824-.424 1.112-.256.256-.744.48-1.48.656l.44.696c.784-.2 1.344-.488 1.696-.856.368-.4.568-.936.6-1.608v-.464h-.832zM10.16 30.68v.384h3.688v-.44a7.26 7.26 0 0 0 1.536.824l.352-.736c-.896-.28-1.576-.656-2.04-1.12h1.792v-.752h-3.576c.096-.176.176-.36.24-.552.592-.032 1.16-.056 1.712-.088.168.176.32.344.456.512l.688-.48c-.4-.448-.968-.968-1.704-1.576l-.632.4c.192.168.376.336.552.504-.824.04-1.664.072-2.528.104.432-.288.864-.624 1.288-1.008l-.8-.272c-.832.832-1.472 1.264-1.912 1.312l.136.68c.648-.016 1.272-.04 1.88-.056-.072.176-.16.352-.264.52H8.512v.752h1.872c-.52.464-1.232.84-2.128 1.12l.376.744a8.521 8.521 0 0 0 1.528-.776zm1.256-1.088H12.8c.192.264.424.512.696.752h-2.864c.296-.232.56-.48.784-.752zm-1.68 1.96v.728h4.52v-.728h-4.52zM8.848 32.8v.768h6.296V32.8H8.848z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/ordered-list-trad-chinese-informal.svg b/src/assets/icons/ordered-list-trad-chinese-informal.svg
new file mode 100644
index 0000000000000000000000000000000000000000..64de5d119fd717be8b907ec5f08ea5e5341d608f
--- /dev/null
+++ b/src/assets/icons/ordered-list-trad-chinese-informal.svg
@@ -0,0 +1 @@
+<svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M36 29a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H19a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H19a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H19a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17z" fill-opacity=".163" fill="#000" fill-rule="nonzero"/><g fill="#000" fill-rule="nonzero"><path d="M15.416 12.416H8.584v-.88h6.832zM15.12 19.408H8.864v-.888h6.256v.888zm.448 4.704H8.432v-.888h7.136v.888zM15.184 28.056h-6.4v-.848h6.4v.848zm.384 5.584H8.416v-.84h7.152v.84zm-.72-2.912H9.192v-.848h5.656v.848z"/></g><path d="M0 0h44v44H0z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/ordered-list-upper-latin.svg b/src/assets/icons/ordered-list-upper-latin.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bc1b5f17f015e5e63427120c29b448397a15f0a0
--- /dev/null
+++ b/src/assets/icons/ordered-list-upper-latin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><path d="M35 29a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17z" fill-opacity=".163"/><path d="M7.88 15l.532-1.463h2.575L11.549 15h1.415l-2.58-6.442H9.01L6.5 15h1.38zm2.69-2.549H8.811l.87-2.39.887 2.39zM14.88 15v-1.235h-1.234V15h1.234zM9.352 25c.83-.006 1.352-.02 1.569-.044.346-.038.636-.14.872-.305.236-.166.422-.387.558-.664.137-.277.205-.562.205-.855 0-.372-.106-.695-.317-.97-.21-.276-.512-.471-.905-.585a1.51 1.51 0 0 0 .661-.567 1.5 1.5 0 0 0 .244-.83c0-.28-.066-.53-.197-.754a1.654 1.654 0 0 0-.495-.539 1.676 1.676 0 0 0-.672-.266c-.25-.042-.63-.063-1.14-.063H7.158V25h2.193zm.142-3.88H8.46v-1.49h.747c.612 0 .983.007 1.112.022.217.026.38.102.49.226.11.125.165.287.165.486a.68.68 0 0 1-.192.503.86.86 0 0 1-.525.23 11.47 11.47 0 0 1-.944.023h.18zm.17 2.795H8.46v-1.723h1.05c.592 0 .977.03 1.154.092.177.062.313.16.406.295a.84.84 0 0 1 .14.492c0 .228-.06.41-.181.547a.806.806 0 0 1-.473.257c-.126.026-.423.04-.892.04zM14.88 25v-1.235h-1.234V25h1.234zm-5.018 9.11c.691 0 1.262-.17 1.711-.512.45-.341.772-.864.965-1.567l-1.261-.4c-.109.472-.287.818-.536 1.037-.25.22-.547.33-.892.33-.47 0-.85-.173-1.143-.519-.293-.345-.44-.925-.44-1.74 0-.767.15-1.322.447-1.665.297-.343.684-.514 1.162-.514.346 0 .64.096.881.29.242.193.4.457.477.79l1.288-.307c-.147-.516-.367-.911-.66-1.187-.492-.465-1.132-.698-1.92-.698-.902 0-1.63.296-2.184.89-.554.593-.83 1.426-.83 2.498 0 1.014.275 1.813.825 2.397.551.585 1.254.877 2.11.877zM14.88 34v-1.235h-1.234V34h1.234z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/ordered-list-upper-roman.svg b/src/assets/icons/ordered-list-upper-roman.svg
new file mode 100644
index 0000000000000000000000000000000000000000..dda3148d68d3bb0bc30d8770887952225228df3a
--- /dev/null
+++ b/src/assets/icons/ordered-list-upper-roman.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 44 44"><path d="M35 29a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17zm0-9a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H18a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h17z" fill-opacity=".163"></path><path d="M11.916 15V8.558h-1.301V15h1.3zm2.465 0v-1.235h-1.235V15h1.235zM9.665 25v-6.442h-1.3V25h1.3zm2.5 0v-6.442h-1.3V25h1.3zm2.466 0v-1.235h-1.235V25h1.235zm-7.216 9v-6.442h-1.3V34h1.3zm2.5 0v-6.442h-1.3V34h1.3zm2.501 0v-6.442h-1.3V34h1.3zm2.465 0v-1.235h-1.235V34h1.235z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/ordered-list.svg b/src/assets/icons/ordered-list.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5a8754020b276d0980764b67e8afa23b3f7e8536
--- /dev/null
+++ b/src/assets/icons/ordered-list.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><path d="M7.734 7.747h6.5m-6.5 5.5h6.5M7.734 2.25h6.5" stroke-linecap="round" fill="none" vector-effect="non-scaling-stroke" stroke="currentColor"/><g fill="var(--umo-primary-color)"><path d="M2.75 6.113V2.127l-.817.802a.546.546 0 0 1-.778-.011.56.56 0 0 1 .012-.786L2.407.914C2.948.384 3.85.77 3.85 1.53v4.583a.553.553 0 0 1-.55.556.553.553 0 0 1-.55-.556zM2.483 8.992c.409-.322.904-.322 1.312 0 .383.301.493.87.204 1.277a4.4 4.4 0 0 1-.23.29c-.197.23-.456.508-.744.803a56.575 56.575 0 0 1-1.709 1.66c-.557.521-.181 1.447.588 1.447H4.64c.304 0 .55-.242.55-.54a.545.545 0 0 0-.55-.542H2.517c.405-.384.876-.841 1.3-1.275.297-.303.575-.6.795-.858.109-.128.208-.252.289-.366.075-.105.157-.233.205-.363.318-.857.158-1.761-.623-2.377a2.125 2.125 0 0 0-2.688 0c-.594.469-.692 1.098-.706 1.484a.545.545 0 0 0 .53.56.546.546 0 0 0 .569-.521c.01-.26.068-.5.295-.68z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/outdent.svg b/src/assets/icons/outdent.svg
new file mode 100644
index 0000000000000000000000000000000000000000..77d29f40303f4ff521d559ccfa6a1e875b2fa119
--- /dev/null
+++ b/src/assets/icons/outdent.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><path d="M1.75 2.25h12.504M6.754 8h7.496m-12.5 5.75h12.504" stroke-linecap="round" vector-effect="non-scaling-stroke" stroke="currentColor"/><path d="M3.75 6L1.757 7.993a.01.01 0 0 0 0 .014L3.75 10" stroke-linecap="round" vector-effect="non-scaling-stroke" stroke="var(--umo-primary-color)"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/page-background.svg b/src/assets/icons/page-background.svg
new file mode 100644
index 0000000000000000000000000000000000000000..24681290858fbd83eba1c693f6073d7813348157
--- /dev/null
+++ b/src/assets/icons/page-background.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><rect  stroke="currentColor" stroke-width="1.5" x="3.5" y="1.5" width="17" height="21" rx="1"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/page-break.svg b/src/assets/icons/page-break.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9daf60fb2e41d8815a8593d13f6029e5e1ae948f
--- /dev/null
+++ b/src/assets/icons/page-break.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 6v6h32V6" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 24h20" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><path d="M8 42v-6h32v6" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/page-footer.svg b/src/assets/icons/page-footer.svg
new file mode 100644
index 0000000000000000000000000000000000000000..26275646f3921a33b59704c9227a423007d1a564
--- /dev/null
+++ b/src/assets/icons/page-footer.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><rect stroke="currentColor" stroke-width="1.5" x="3.5" y="1.5" width="17" height="21" rx="1"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.5 18.5h17"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/page-header.svg b/src/assets/icons/page-header.svg
new file mode 100644
index 0000000000000000000000000000000000000000..22c69d2f442eef904d635031aab084af48751209
--- /dev/null
+++ b/src/assets/icons/page-header.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><rect stroke="currentColor" x="3.5" stroke-width="1.5" y="1.5" width="17" height="21" rx="1"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.5 5.5h17"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/page-margin.svg b/src/assets/icons/page-margin.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d41bfb129c568fba3a2a1d9c0869f398a668b405
--- /dev/null
+++ b/src/assets/icons/page-margin.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><rect stroke="currentColor" x="3.5" y="1.5" stroke-width="1.5" width="17" height="21" rx="1"/><path d="M3.5 4.5h17m-14 18v-21m11 21v-21m-14 18h17" stroke="currentColor" opacity=".3" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/page-orientation.svg b/src/assets/icons/page-orientation.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b31fb23135e71904c6aee1a865bfefc60748a9b0
--- /dev/null
+++ b/src/assets/icons/page-orientation.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><rect stroke="currentColor" x="1" y="2.5" stroke-width="1.5" width="13" height="18" rx="1"/><rect stroke="currentColor" transform="rotate(90 15.5 17.5)" x="10" y="10" stroke-width="1.5" width="11" height="15" rx="1"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/page-size.svg b/src/assets/icons/page-size.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b02ba30bcd7770209d6a7e8a5ba5f1855e8213e0
--- /dev/null
+++ b/src/assets/icons/page-size.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke-width="1.5"><path d="M0 0h24v24H0z"/><path d="M4.5 2.5h11a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-14a1 1 0 0 1 1-1z" stroke="currentColor"/><path d="M15 20.5l1.5 1.5-1.5 1.5m-10-3L3.5 22 5 23.5M3.5 22h12M21.5 17L20 18.5 18.5 17m3-13L20 2.5 18.5 4M20 2.5V18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/page.svg b/src/assets/icons/page.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6be8493626914f0b87fbd1929f0d2dc0a8bdb194
--- /dev/null
+++ b/src/assets/icons/page.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 44h28a2 2 0 0 0 2-2V14H30V4H10a2 2 0 0 0-2 2v36a2 2 0 0 0 2 2zM30 4l10 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/palette-color.svg b/src/assets/icons/palette-color.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8e6515e49de906fd4744ce03df97700c3011327b
--- /dev/null
+++ b/src/assets/icons/palette-color.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 44c5.96 0 2.336-8.864 6-13 3.126-3.53 14-1.914 14-7 0-11.046-8.954-20-20-20S4 12.954 4 24s8.954 20 20 20z" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/><path d="M28 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM16 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 34a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/paragraph.svg b/src/assets/icons/paragraph.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c562063dbbe1d4856e2a8ee1b15ffdb67abaaa90
--- /dev/null
+++ b/src/assets/icons/paragraph.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 10.933V6h32v4.933M24 6v36M16 42h16" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/pdf.svg b/src/assets/icons/pdf.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bff8e79d2a05300b4cfa17dcf7c3bf2e5dcb96c8
--- /dev/null
+++ b/src/assets/icons/pdf.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 4h20l10 10v28a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path clip-rule="evenodd" d="M18 18h12v7.992L18.008 26 18 18z" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 18v16" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/plus.svg b/src/assets/icons/plus.svg
new file mode 100644
index 0000000000000000000000000000000000000000..36601c156590009f2c445391e811a488a2e1fe65
--- /dev/null
+++ b/src/assets/icons/plus.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.06 10l-.036 28M10 24h28" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/preview.svg b/src/assets/icons/preview.svg
new file mode 100644
index 0000000000000000000000000000000000000000..04c4418c304d144d62bdeafd677357219942c0d2
--- /dev/null
+++ b/src/assets/icons/preview.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 35.0137H9H4V8.01273C4 6.90868 4.89543 6.01367 6 6.01367H42C43.1046 6.01367 44 6.90868 44 8.01273V35.0137H36" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 32L14 42H34L24 32Z" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/print.svg b/src/assets/icons/print.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4392cb6b82062b8872f50ee921380f1e103636d6
--- /dev/null
+++ b/src/assets/icons/print.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M37 32H11v12h26V32z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path clip-rule="evenodd" d="M4 20h40v18h-6.983v-6H10.98v6H4V20z" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M38 4H10v16h28V4z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/qrcode.svg b/src/assets/icons/qrcode.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a61d3103596025670352fb2d33225edc3a0da51e
--- /dev/null
+++ b/src/assets/icons/qrcode.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M32 6h10v10H32zM32 32h10v10H32zM6 32h10v10H6zM6 6h10v10H6zM8 24h22M38 24h2M24 37v2M24 17v14M24 8v2"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/quote.svg b/src/assets/icons/quote.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e49b990ec223662f01391171c29a2ae22497aa13
--- /dev/null
+++ b/src/assets/icons/quote.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.853 9.116C11.323 13.952 7.14 19.58 6.303 26.003 5 36 13.94 40.893 18.47 36.497 23 32.1 20.285 26.52 17.005 24.994c-3.28-1.525-5.286-.994-4.936-3.033.35-2.038 5.016-7.69 9.116-10.322a.749.749 0 0 0 .114-1.02L20.285 9.3c-.44-.572-.862-.55-1.432-.185zM38.679 9.116c-7.53 4.836-11.714 10.465-12.55 16.887-1.303 9.997 7.637 14.89 12.167 10.494 4.53-4.397 1.815-9.977-1.466-11.503-3.28-1.525-5.286-.994-4.936-3.033.35-2.038 5.017-7.69 9.117-10.322a.749.749 0 0 0 .113-1.02L40.11 9.3c-.44-.572-.862-.55-1.431-.185z" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/redo.svg b/src/assets/icons/redo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8f432dbf467da00b03aef3663bb021af310a81ee
--- /dev/null
+++ b/src/assets/icons/redo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><g stroke="currentColor" fill="none" stroke-linecap="round"><path d="M14.113 4.75h-7.5a4.75 4.75 0 0 0 0 9.5h3.75" vector-effect="non-scaling-stroke"/><path d="M11.113 1.75l2.993 2.993a.01.01 0 0 1 0 .014L11.113 7.75" vector-effect="non-scaling-stroke"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/seal.svg b/src/assets/icons/seal.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c4c8b3b320d15bcf04804d5ed900348e293a09fb
--- /dev/null
+++ b/src/assets/icons/seal.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 37C5 35.8954 5.89543 35 7 35H41C42.1046 35 43 35.8954 43 37V42C43 43.1046 42.1046 44 41 44H7C5.89543 44 5 43.1046 5 42V37Z" fill="none" stroke="currentColor" stroke-width="3"/><path d="M5 31C5 29.8954 5.89543 29 7 29H41C42.1046 29 43 29.8954 43 31V42C43 43.1046 42.1046 44 41 44H7C5.89543 44 5 43.1046 5 42V31Z" stroke="currentColor" stroke-width="3"/><path d="M18.763 15.6637C18.9051 15.2657 19.2821 15 19.7047 15H28.2953C28.7179 15 29.0949 15.2657 29.237 15.6637L34 29H14L18.763 15.6637Z" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><rect x="15" y="4" width="18" height="10.8" rx="5.4" fill="none" stroke="currentColor" stroke-width="3"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/search-replace.svg b/src/assets/icons/search-replace.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8d9974febaf3327589940d16f2a5c72d06a730b9
--- /dev/null
+++ b/src/assets/icons/search-replace.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M40 27V6a2 2 0 0 0-2-2H10a2 2 0 0 0-2 2v36a2 2 0 0 0 2 2h11M17 12h14M17 20h14M17 28h6" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M37 37c0 1.38-.56 2.63-1.465 3.535A5 5 0 1 1 37 37z"/><path d="M39 44l-3.465-3.465m0 0a5 5 0 1 0-7.071-7.07 5 5 0 0 0 7.072 7.07z" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/select-all.svg b/src/assets/icons/select-all.svg
new file mode 100644
index 0000000000000000000000000000000000000000..409e9b5c147c0c393a6eecbb9feedea07cf97042
--- /dev/null
+++ b/src/assets/icons/select-all.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M32 16h9a2 2 0 0 1 2 2v23a2 2 0 0 1-2 2H18a2 2 0 0 1-2-2v-9" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M32 16V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v23a2 2 0 0 0 2 2h9M41 16L17 40M32 7L7 32M32 16L16 32M43 24L24 43M24 5L5 24M43 34l-9 9M14 5l-9 9" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/setting.svg b/src/assets/icons/setting.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6f9535ee07f588a62f6c65e05d69661db4b9336d
--- /dev/null
+++ b/src/assets/icons/setting.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><path d="M1.853 3.966a.01.01 0 0 0-.016.003 4.307 4.307 0 0 0 5.714 5.7l4.87 4.871a1.5 1.5 0 1 0 2.122-2.12L9.671 7.546a4.307 4.307 0 0 0-5.713-5.704.01.01 0 0 0-.003.016l2.6 2.6L4.45 6.563 1.853 3.966z" fill="none" vector-effect="non-scaling-stroke" stroke="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/share.svg b/src/assets/icons/share.svg
new file mode 100644
index 0000000000000000000000000000000000000000..26ef5030c5d9dd9c044dbf30120a1c85aab7ab8b
--- /dev/null
+++ b/src/assets/icons/share.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M35 16a5 5 0 1 0 0-10 5 5 0 0 0 0 10zM13 29a5 5 0 1 0 0-10 5 5 0 0 0 0 10z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path d="M30 13.575l-12.66 7.67M17.338 26.564l13.34 7.883" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M35 32a5 5 0 1 1 0 10 5 5 0 0 1 0-10z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/shortcut.svg b/src/assets/icons/shortcut.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d49133cf3b0c13cd777e3e90ee17b34984985b35
--- /dev/null
+++ b/src/assets/icons/shortcut.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M42 7H6a2 2 0 0 0-2 2v28a2 2 0 0 0 2 2h36a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path d="M12 19h2M21 19h2M29 19h7M12 28h24" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/signature.svg b/src/assets/icons/signature.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6e9cbc4597182587d607642ae07dd4cd8fc1e4ea
--- /dev/null
+++ b/src/assets/icons/signature.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M24 24v-5L39 4l5 5-15 15h-5z" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 24H9a5 5 0 0 0 0 10h30a5 5 0 0 1 0 10H18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/special-characters.svg b/src/assets/icons/special-characters.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f2eb16ae9647484cd300d6be7e3f8c574852b00b
--- /dev/null
+++ b/src/assets/icons/special-characters.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 40.003h14.004C11.334 35.636 8 30.301 8 24c0-9.453 7.017-16 16.008-16C33 8 40 15 40 24c0 6-3.331 11.334-9.993 16.003H44" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/spellcheck.svg b/src/assets/icons/spellcheck.svg
new file mode 100644
index 0000000000000000000000000000000000000000..50644940eb2dc68cc8f5ef7298345d33bfc93387
--- /dev/null
+++ b/src/assets/icons/spellcheck.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34 10l8 8M42 10l-8 8M44 30l-7 8-4-4M26 10H4v8h22v-8zM26 30H4v8h22v-8z" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/strike.svg b/src/assets/icons/strike.svg
new file mode 100644
index 0000000000000000000000000000000000000000..462e854818d588746b72e503db36b2528d0d06ee
--- /dev/null
+++ b/src/assets/icons/strike.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><path d="M1.5 8.25h13M2.75 14.25l1.415-3.503m9.085 3.504l-1.401-3.504M6.178 5.28l1.544-3.872a.3.3 0 0 1 .556 0l1.538 3.872" stroke-linecap="round" fill="none" vector-effect="non-scaling-stroke" stroke="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/subscript.svg b/src/assets/icons/subscript.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2e5f0aacb8c486c3766f1434cf2464f7a651eeda
--- /dev/null
+++ b/src/assets/icons/subscript.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.266 10.905a.402.402 0 0 0 .399.446h.171c.236 0 .424-.208.464-.46v-.005c.03-.16.078-.305.142-.432a.841.841 0 0 1 .253-.316.633.633 0 0 1 .395-.124c.228 0 .414.08.558.24.15.155.224.374.224.657a.983.983 0 0 1-.112.473c-.07.139-.159.263-.268.374-.104.11-.221.213-.35.308-.13.088-.25.177-.365.265-.223.172-.437.341-.64.507a3.246 3.246 0 0 0-.521.549l-.037.048a2.273 2.273 0 0 0-.328.614c-.084.25-.108.951.699.951h2.581c.236 0 .428-.207.428-.461v-.091c0-.255-.192-.462-.428-.462h-2.037l.036-.056c.12-.187.258-.4.411-.535.169-.15.342-.288.521-.416.179-.132.355-.265.529-.398.178-.133.337-.28.476-.44.14-.167.25-.355.335-.566a2.03 2.03 0 0 0 .127-.756c0-.282-.05-.537-.149-.764a1.648 1.648 0 0 0-.96-.93A1.851 1.851 0 0 0 14.141 9c-.313 0-.59.06-.834.183a1.602 1.602 0 0 0-.595.498c-.16.21-.278.46-.358.748-.043.151-.072.31-.09.476z" fill="var(--umo-primary-color)"/><path d="M10.75 1.75l-9 12.5m9 0l-9-12.5" stroke-linecap="round" fill="none" vector-effect="non-scaling-stroke" stroke="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/superscript.svg b/src/assets/icons/superscript.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6d97b6ed31c0d1664535d15b18014ab24ab57508
--- /dev/null
+++ b/src/assets/icons/superscript.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.665 3.351a.402.402 0 0 1-.4-.446c.018-.166.047-.325.09-.476.08-.288.199-.537.357-.748.16-.216.358-.382.596-.498.243-.122.521-.183.834-.183.238 0 .464.042.678.125a1.648 1.648 0 0 1 .96.93c.1.227.149.482.149.764 0 .294-.042.546-.127.756a2.08 2.08 0 0 1-.335.565c-.139.16-.298.308-.476.44-.174.134-.35.266-.529.4a6.289 6.289 0 0 0-.521.415c-.153.136-.29.348-.41.535l-.037.056h2.037c.236 0 .428.207.428.462v.09c0 .255-.192.462-.428.462H12.95c-.807 0-.783-.701-.7-.95.083-.229.196-.443.329-.615l.037-.049c.149-.199.322-.382.52-.548.204-.166.418-.335.641-.507a7.68 7.68 0 0 1 .365-.265c.129-.095.246-.197.35-.308.11-.11.198-.235.268-.374a.984.984 0 0 0 .112-.473c0-.283-.075-.501-.224-.657a.715.715 0 0 0-.558-.24.633.633 0 0 0-.395.124.842.842 0 0 0-.253.316 1.593 1.593 0 0 0-.141.432l-.001.006c-.04.251-.228.46-.464.46h-.171z" fill="var(--umo-primary-color)"/><path d="M10.75 1.75l-9 12.5m9 0l-9-12.5" stroke-linecap="round" fill="none" vector-effect="non-scaling-stroke" stroke="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/table-add-column-after.svg b/src/assets/icons/table-add-column-after.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8e0a026ec9f1f86f8ddce75b85c95690ed2fa0be
--- /dev/null
+++ b/src/assets/icons/table-add-column-after.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="4" stroke-linejoin="round" d="M14.5 17h28v14h-28z"/><path d="M6.5 6v36" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/table-add-column-before.svg b/src/assets/icons/table-add-column-before.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3bacc2ad8acc73044e00ee0329605e687702aa69
--- /dev/null
+++ b/src/assets/icons/table-add-column-before.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="4" stroke-linejoin="round" d="M6 17h28v14H6z"/><path d="M42 6v36" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/table-add-row-after.svg b/src/assets/icons/table-add-row-after.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fe7f2d9dc8590a3fc128c42c4905c39ba1d51f9a
--- /dev/null
+++ b/src/assets/icons/table-add-row-after.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="4" stroke-linejoin="round" d="M17 6h14v28H17z"/><path d="M42 42H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/table-add-row-before.svg b/src/assets/icons/table-add-row-before.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d7fdd2f6cc6422f633ac4a7b7c3685c135735fff
--- /dev/null
+++ b/src/assets/icons/table-add-row-before.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="4" stroke-linejoin="round" d="M17 14.5h14v28H17z"/><path d="M42 6.5H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/table-cells-align.svg b/src/assets/icons/table-cells-align.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3f094bcb4962bb6ee33c15ee90186be04b60fbb6
--- /dev/null
+++ b/src/assets/icons/table-cells-align.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="6" width="36" height="36" rx="3" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 30h4M18 24h12M20 18h8" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/table-cells-background.svg b/src/assets/icons/table-cells-background.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d52cc24e2870059094e8ae76a919a389aa084186
--- /dev/null
+++ b/src/assets/icons/table-cells-background.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M37 37a4 4 0 0 0 4-4c0-1.473-1.333-3.473-4-6-2.667 2.527-4 4.527-4 6a4 4 0 0 0 4 4z" fill="currentColor"/><path d="M20.854 5.504l3.535 3.536" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><path d="M23.682 8.333L8.125 23.889 19.44 35.203l15.556-15.557L23.682 8.333z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path d="M12 20.073l16.961 5.577M4 43h40" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/table-delete-column.svg b/src/assets/icons/table-delete-column.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8d00b2855a839ccc0d4f4d3aec6c2266f5f79f14
--- /dev/null
+++ b/src/assets/icons/table-delete-column.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M10 17.5l4 4m-4 0l4-4m-4-4v-11h4v11h-4z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M0 0v24h24V0z"/><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M3 21.5v-19M21 21.25v-19"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/table-delete-row.svg b/src/assets/icons/table-delete-row.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fe52657f3343ef6910e5428d783ce0b87b75b1c4
--- /dev/null
+++ b/src/assets/icons/table-delete-row.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M17.5 14l4-4m0 4l-4-4m-4 4h-11v-4h11v4z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M0 24h24V0H0z"/><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M21.5 21h-19M21.25 3h-19"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/table-delete.svg b/src/assets/icons/table-delete.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b481a8e3057893fc3f3902edc10906827916d4b0
--- /dev/null
+++ b/src/assets/icons/table-delete.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 11L4 24l10 13h30V11H14zM21 19l10 10M31 19L21 29" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/table-fix.svg b/src/assets/icons/table-fix.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5643fccd4a4a5aabfa1d5356fbbec8dd19098ba9
--- /dev/null
+++ b/src/assets/icons/table-fix.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="5" width="38" height="38" rx="2" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 18h38M5 30h38M17 5v38M30 5v38" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/table-header-cell.svg b/src/assets/icons/table-header-cell.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4e01e3246f49fda23950c6a5052bfed10ee946be
--- /dev/null
+++ b/src/assets/icons/table-header-cell.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M40 6H8a2 2 0 0 0-2 2v32a2 2 0 0 0 2 2h32a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2z" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/><path d="M16.123 6L6 15M26.003 6L6 24M35 6L6 33M19 30L6 42M41 10L29.243 20.852M19 21v21M19 21h23" stroke="currentColor" stroke-width="4" stroke-linecap="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/table-header-column.svg b/src/assets/icons/table-header-column.svg
new file mode 100644
index 0000000000000000000000000000000000000000..100c66571404bd390029f82375558764b5e6b54b
--- /dev/null
+++ b/src/assets/icons/table-header-column.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M40 6H8a2 2 0 0 0-2 2v32a2 2 0 0 0 2 2h32a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2z" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/><path d="M16.123 6L6 15M19 12L6 24M19 21L6 33M19 30L6 42M19 6v36" stroke="currentColor" stroke-width="4" stroke-linecap="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/table-header-row.svg b/src/assets/icons/table-header-row.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3f5d70813161349e96302403cda4e825cdc52d89
--- /dev/null
+++ b/src/assets/icons/table-header-row.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M40 6H8a2 2 0 0 0-2 2v32a2 2 0 0 0 2 2h32a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2z" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/><path d="M6 19.059h36M16.123 6L6 15M42 10.007L32 19M26.123 6l-14.2 12.624M36.123 6l-14.2 12.624" stroke="currentColor" stroke-width="4" stroke-linecap="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/table-merge-cell.svg b/src/assets/icons/table-merge-cell.svg
new file mode 100644
index 0000000000000000000000000000000000000000..001970cf7cc71929590b435b4ca4ba014db01d3e
--- /dev/null
+++ b/src/assets/icons/table-merge-cell.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 14V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v38a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-9M28 34v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H29a1 1 0 0 0-1 1v9M28 24h16M5 24h15" stroke="currentColor" stroke-width="4" stroke-linecap="round"/><path d="M32.748 28.818l-1.59-1.59-3.182-3.183 3.181-3.182 1.591-1.59M15.375 28.818l1.591-1.59 3.182-3.183-3.182-3.182-1.591-1.59" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/table-next-cell.svg b/src/assets/icons/table-next-cell.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a4e7efdb4c4d6dad30dea671c4c2be8276baaac4
--- /dev/null
+++ b/src/assets/icons/table-next-cell.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M42 19V9a3 3 0 0 0-3-3H9a3 3 0 0 0-3 3v30a3 3 0 0 0 3 3h10" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M34 24l8 8-8 8M24 32h18" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/table-previous-cell.svg b/src/assets/icons/table-previous-cell.svg
new file mode 100644
index 0000000000000000000000000000000000000000..64fa4087096af144d38fb4044637f6482fb024c3
--- /dev/null
+++ b/src/assets/icons/table-previous-cell.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M42 19V9a3 3 0 0 0-3-3H9a3 3 0 0 0-3 3v30a3 3 0 0 0 3 3h10" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M32 24l-8 8 8 8M24 32h18" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/table-split-cell.svg b/src/assets/icons/table-split-cell.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f8c18d5cc1f315769e5317432164f47f48566ce3
--- /dev/null
+++ b/src/assets/icons/table-split-cell.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 14V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v38a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9M44 34v9a1 1 0 0 1-1 1H29a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v9M28 24l16 .013M4 24.013L20 24" stroke="currentColor" stroke-width="4" stroke-linecap="round"/><path d="M39.227 28.778l1.592-1.591L44 24.005l-3.181-3.182-1.592-1.591M8.755 28.786l-1.59-1.59-3.183-3.183 3.182-3.182 1.591-1.59" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/table.svg b/src/assets/icons/table.svg
new file mode 100644
index 0000000000000000000000000000000000000000..34df1a94558bc484d1e0cc121c3fa252b43eef4e
--- /dev/null
+++ b/src/assets/icons/table.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M42 6H6a2 2 0 0 0-2 2v32a2 2 0 0 0 2 2h36a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path d="M4 18h40M17.5 18v24M30.5 18v24M4 30h40M44 8v32a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/task-list-2.svg b/src/assets/icons/task-list-2.svg
new file mode 100644
index 0000000000000000000000000000000000000000..80594c1172d8f2496abcc5c1572468265ae63946
--- /dev/null
+++ b/src/assets/icons/task-list-2.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#icon-34fc5d6353e4f38)" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M42 20v19a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h21"/><path d="M16 20l10 8L41 7"/></g><defs><clipPath id="icon-34fc5d6353e4f38"><path fill="currentColor" d="M0 0h48v48H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/src/assets/icons/task-list.svg b/src/assets/icons/task-list.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5edf06fe0a07ec04481bf8b22ca9b145687c8d51
--- /dev/null
+++ b/src/assets/icons/task-list.svg
@@ -0,0 +1 @@
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h14v14H0z"/><path d="M13 5.667V12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h7" stroke="currentColor" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"/><path stroke="var(--umo-primary-color)" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round" d="M4.333 5.667l3.334 2.666 5-7"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/template.svg b/src/assets/icons/template.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f386e2d6f315cf50a90e2d0cbd2743161563e39a
--- /dev/null
+++ b/src/assets/icons/template.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23 4H4v22h19V4zM44 34H4v9h40v-9zM44 4H31v8h13V4zM44 18H31v8h13v-8z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/text-box.svg b/src/assets/icons/text-box.svg
new file mode 100644
index 0000000000000000000000000000000000000000..58e2531c61f1e48595e33e40290704667f5d110c
--- /dev/null
+++ b/src/assets/icons/text-box.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 4H4v8h8V4zM44 36h-8v8h8v-8zM12 36H4v8h8v-8zM44 4h-8v8h8V4z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path d="M8 36V12M40 36V12M12 8h24M12 40h24" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/text.svg b/src/assets/icons/text.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c1b3d0623684ca02ba41366b4d64a737286adfeb
--- /dev/null
+++ b/src/assets/icons/text.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 44h28a2 2 0 0 0 2-2V14H30V4H10a2 2 0 0 0-2 2v36a2 2 0 0 0 2 2zM30 4l10 10M24 22v14M18 22h12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/toc.svg b/src/assets/icons/toc.svg
new file mode 100644
index 0000000000000000000000000000000000000000..781eba38abf2128b0a6014843ef2a0c945df2f28
--- /dev/null
+++ b/src/assets/icons/toc.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="8" y="4" width="32" height="40" rx="2" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path d="M21 14h12M21 24h12M21 34h12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 16a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM15 26a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM15 36a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/toolbar-classic.svg b/src/assets/icons/toolbar-classic.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ae32576f1efae106658aa1f8907505e2a88179d6
--- /dev/null
+++ b/src/assets/icons/toolbar-classic.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="6" width="36" height="36" rx="3" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path d="M6 16h36M6 13v6M42 13v6" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/toolbar-ribbon.svg b/src/assets/icons/toolbar-ribbon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ea786048dd5183fab89e0869344caecd87af9f03
--- /dev/null
+++ b/src/assets/icons/toolbar-ribbon.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="6" width="36" height="36" rx="3" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path d="M6 32h36M6 29v6M42 29v6" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/toolbar-source.svg b/src/assets/icons/toolbar-source.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4feeb0177f727f85abe957c9911d5e9c08159aa0
--- /dev/null
+++ b/src/assets/icons/toolbar-source.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="8" width="40" height="32" rx="2" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 10a2 2 0 0 1 2-2h36a2 2 0 0 1 2 2v6H4v-6z" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M25 23l-2 11" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><path d="M31 23l6 5-6 6M17 23l-6 5 6 6" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/underline.svg b/src/assets/icons/underline.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5fb954c68ba248ec8f6130459d91638a5eb67f3a
--- /dev/null
+++ b/src/assets/icons/underline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><path d="M12.25 1.75V7a4.25 4.25 0 0 1-8.5 0V1.75M3.25 14.25h9.5" stroke-linecap="round" fill="none" vector-effect="non-scaling-stroke" stroke="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/undo.svg b/src/assets/icons/undo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..df1c6e730790259255107450bd1f139cf8c5ed49
--- /dev/null
+++ b/src/assets/icons/undo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="1.5"><g stroke="currentColor" fill="none" stroke-linecap="round"><path d="M2 4.75h7.5a4.75 4.75 0 1 1 0 9.5H5.75" vector-effect="non-scaling-stroke"/><path d="M4.886 1.75L1.894 4.743a.01.01 0 0 0 0 .014L4.886 7.75" vector-effect="non-scaling-stroke"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/video.svg b/src/assets/icons/video.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cb8fa746a0cd21e0536df89614253499f86f1b11
--- /dev/null
+++ b/src/assets/icons/video.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 10a2 2 0 0 1 2-2h36a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V10z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path d="M36 8v32M12 8v32M38 18h6M38 30h6M4 18h6M4 16v4M9 8h6M9 40h6M33 8h6M33 40h6M4 30h6M4 28v4M44 28v4M44 16v4" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 19l8 5-8 5V19z" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/watermark.svg b/src/assets/icons/watermark.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4d7757c8e0a956b1d3872882c41b2592a3d77662
--- /dev/null
+++ b/src/assets/icons/watermark.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><rect stroke="currentColor" stroke-width="1.5" x="3.5" y="1.5" width="17" height="21" rx="1"/><path d="M8.5 4.5l-3 3m13 9L16 19M13.5 4.5l-8 8m13-7l-13 13m13-7L11 19" opacity=".334" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/web-page.svg b/src/assets/icons/web-page.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e6a60137dbac9aeaad01e826177cca032b08f44d
--- /dev/null
+++ b/src/assets/icons/web-page.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25 40H7a3 3 0 0 1-3-3V11a3 3 0 0 1 3-3h34a3 3 0 0 1 3 3v13.941" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 11a3 3 0 0 1 3-3h34a3 3 0 0 1 3 3v9H4v-9z" stroke="currentColor" stroke-width="3"/><path d="M32 35h12M38 29v12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><circle r="2" transform="matrix(0 -1 -1 0 10 14)" fill="currentColor"/><circle r="2" transform="matrix(0 -1 -1 0 16 14)" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/laser-pointer.svg b/src/assets/images/laser-pointer.svg
new file mode 100644
index 0000000000000000000000000000000000000000..241680fa1379acee6a53dd1b85a5a2fb3f8d4252
--- /dev/null
+++ b/src/assets/images/laser-pointer.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="33" height="33" viewBox="0 0 33 33"><defs><circle id="b" cx="16.5" cy="16.5" r="4"/><filter x="-218.8%" y="-218.8%" width="537.5%" height="537.5%" filterUnits="objectBoundingBox" id="a"><feMorphology radius="2.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"/><feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" in="shadowBlurOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use stroke="red" stroke-width="5" fill="#FFF" xlink:href="#b"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/watermark-compact.png b/src/assets/images/watermark-compact.png
new file mode 100644
index 0000000000000000000000000000000000000000..1fbabef88d51444c8e3a5bc4a5afa4ec29fc2a59
Binary files /dev/null and b/src/assets/images/watermark-compact.png differ
diff --git a/src/assets/images/watermark-spacious.png b/src/assets/images/watermark-spacious.png
new file mode 100644
index 0000000000000000000000000000000000000000..07a563f3e7d6d1a763d6da10711d31633eae82d2
Binary files /dev/null and b/src/assets/images/watermark-spacious.png differ
diff --git a/src/assets/styles/_mixins.less b/src/assets/styles/_mixins.less
new file mode 100644
index 0000000000000000000000000000000000000000..e006738295f1430b1fc81afa82d68244fac3f2eb
--- /dev/null
+++ b/src/assets/styles/_mixins.less
@@ -0,0 +1,121 @@
+.scrollbar() {
+  overflow: auto;
+  &::-webkit-scrollbar {
+    width: var(--umo-scrollbar-size) !important;
+    height: var(--umo-scrollbar-size) !important;
+    position: absolute;
+  }
+  &::-webkit-scrollbar-track {
+    width: var(--umo-scrollbar-size) !important;
+    background: transparent;
+  }
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: var(--umo-scrollbar-thumb-color);
+    background-clip: padding-box;
+    border-radius: 1em;
+    transition: background-color 0.3s;
+    cursor: pointer;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--umo-scrollbar-thumb-hover-color);
+  }
+}
+.page-divider() {
+  display: block;
+  white-space: nowrap;
+  letter-spacing: 100vw;
+  overflow: hidden;
+  width: 100%;
+  user-select: none;
+  border: none;
+  &::after {
+    display: block;
+    content: '\2000';
+    text-decoration-line: line-through;
+    text-decoration-style: solid;
+    text-decoration-thickness: 0.1em;
+  }
+  &[data-type='signle'] {
+    &::after {
+      text-decoration-style: solid;
+    }
+  }
+  &[data-type='signle-bold'] {
+    &::after {
+      text-decoration-style: solid;
+      text-decoration-thickness: 0.3em;
+    }
+  }
+  &[data-type='double'] {
+    &::after {
+      text-decoration-style: double;
+    }
+  }
+  &[data-type='dotted'] {
+    &::after {
+      text-decoration-style: dotted;
+    }
+  }
+  &[data-type='dashed'] {
+    &::after {
+      text-decoration-style: dashed;
+    }
+  }
+  &[data-type='dashed-double'] {
+    &::after {
+      text-decoration-style: dashed;
+      text-decoration-thickness: 0.1em;
+      margin-top: 0.5em;
+      line-height: 0.5em;
+    }
+    &::after {
+      display: block;
+      content: '\2000';
+      text-decoration-line: line-through;
+      text-decoration-thickness: 0.1em;
+      text-decoration-style: dashed;
+      line-height: 0.5em;
+      margin-bottom: 0.5em;
+    }
+  }
+  &[data-type='double-bold-top'] {
+    &::before {
+      text-decoration-style: solid;
+      text-decoration-thickness: 0.3em;
+      margin-top: 0.5em;
+      line-height: 0.5em;
+    }
+    &::after {
+      display: block;
+      content: '\2000';
+      text-decoration-line: line-through;
+      text-decoration-thickness: 0.05em;
+      text-decoration-style: solid;
+      line-height: 0.5em;
+      margin-bottom: 0.5em;
+    }
+  }
+  &[data-type='double-bold-bottom'] {
+    &::before {
+      text-decoration-style: solid;
+      text-decoration-thickness: 0.05em;
+      margin-top: 0.5em;
+      line-height: 0.5em;
+    }
+    &::after {
+      display: block;
+      content: '\2000';
+      text-decoration-line: line-through;
+      text-decoration-thickness: 0.3em;
+      text-decoration-style: solid;
+      line-height: 0.5em;
+      margin-bottom: 0.5em;
+    }
+  }
+  &[data-type='wavy'] {
+    &::before {
+      text-decoration-style: wavy;
+      text-decoration-thickness: 0.12em;
+    }
+  }
+}
diff --git a/src/assets/styles/_variables.less b/src/assets/styles/_variables.less
new file mode 100644
index 0000000000000000000000000000000000000000..28d65a80757886f4c5f15e009f8b752086d76a99
--- /dev/null
+++ b/src/assets/styles/_variables.less
@@ -0,0 +1,61 @@
+:root {
+  // 主题色
+  --umo-primary-color: #015beb;
+  --umo-color-white: #fff;
+  --umo-color-black: #000;
+  // 警示颜色
+  --umo-warning-color: #f6913e;
+  --umo-error-color: #ef3f35;
+  // 背景颜色
+  --umo-container-background: #f4f5f7;
+  --umo-button-hover-background: #f1f3f5;
+
+  // 字体相关
+  --umo-font-family: helvetica neue, helvetica, pingfang sc, hiragino sans gb,
+    microsoft yahei, simsun, sans-serif;
+  --umo-font-size: 14px;
+  --umo-font-size-small: 12px;
+  --umo-text-color: rgb(51, 54, 57);
+  --umo-text-color-light: rgba(0, 0, 0, 0.5);
+  --umo-text-color-disabled: #a7abac;
+
+  // 边框
+  --umo-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.03),
+    0 8px 10px 1px rgba(0, 0, 0, 4%), 0 5px 5px -3px rgba(0, 0, 0, 8%);
+  --umo-border-color: rgba(0, 0, 0, 0.08);
+  --umo-border-color-dark: #ddd;
+  --umo-border-color-light: rgba(0, 0, 0, 0.05);
+
+  // 圆角
+  --umo-radius: 3px;
+  --umo-radius-medium: 5px;
+
+  // 弹出层
+  --umo-popup-content-padding: 12px;
+  --umo-popup-max-height: max(60vh, 180px);
+  --umo-tooltip-content-padding: 6px 10px;
+  --umo-mask-color: transparent;
+
+  // 编辑器
+  --umo-content-placeholder-color: #999;
+  --umo-content-node-border: #e7e7e7;
+  --umo-content-node-radius: var(--umo-radius);
+  --umo-content-node-bottom: 0.75em;
+  --umo-content-node-selected-background: #f5f8fc;
+  --umo-content-table-border-color: #333;
+  --umo-content-table-thead-background: #f1f3f5;
+  --umo-content-table-selected-background: rgba(200, 200, 255, 0.4);
+  --umo-content-line-number-color: #e7e8ea;
+  --umo-content-search-result-background: #fefc7ef2;
+  --umo-content-search-result-current-background: #0dff00c3;
+  --umo-content-invisible-break-color: rgb(78, 139, 252);
+  --umo-content-code-color: var(--umo-primary-color);
+  --umo-content-code-background: #f1f3f5;
+  --umo-content-code-family: Consolas, Monaco, Andale Mono, Ubuntu Mono,
+    monospace;
+
+  // 滚动条
+  --umo-scrollbar-size: 4px;
+  --umo-scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
+  --umo-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.35);
+}
diff --git a/src/assets/styles/drager.less b/src/assets/styles/drager.less
new file mode 100644
index 0000000000000000000000000000000000000000..99fced8e076da907ffe78a16a0d70d34058fc771
--- /dev/null
+++ b/src/assets/styles/drager.less
@@ -0,0 +1,105 @@
+.es-drager {
+  position: relative;
+  --es-drager-color: var(--umo-primary-color) !important;
+  box-sizing: border-box;
+  &:not([draggable='true']) {
+    left: 0 !important;
+    top: 0 !important;
+  }
+  &[draggable='true'] {
+    position: absolute;
+    z-index: 90 !important;
+    cursor: move;
+  }
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: none;
+  }
+  &.selected {
+    transition: none;
+    user-select: none;
+    &:after {
+      display: block;
+    }
+    &.border {
+      outline: 1px solid var(--umo-primary-color);
+    }
+    .es-drager-dot {
+      display: block;
+    }
+  }
+  &-dot {
+    display: none;
+    position: absolute;
+    z-index: 1;
+    transform: translate(-50%, -50%);
+    cursor: se-resize;
+    &[data-side*='right'] {
+      transform: translate(50%, -50%);
+    }
+    &[data-side*='bottom'] {
+      transform: translate(-50%, 50%);
+    }
+    &[data-side='bottom-right'] {
+      transform: translate(50%, 50%);
+    }
+    &-handle {
+      width: 8px;
+      height: 8px;
+      background: #fff;
+      border: solid 1px var(--umo-primary-color);
+    }
+  }
+  &-rotate {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: solid 1px var(--umo-content-node-border);
+    background-color: #fff;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
+    cursor: default;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -78px);
+    &::after {
+      content: '';
+      display: block;
+      width: 1px;
+      height: 58px;
+      position: absolute;
+      background-color: var(--umo-primary-color);
+      left: 10px;
+      top: 21px;
+    }
+    &-handle {
+      width: 16px;
+      height: 16px;
+      font-size: 20px;
+      color: var(--umo-primary-color);
+      svg {
+        display: block;
+      }
+    }
+  }
+}
+
+[contenteditable='false'] {
+  .es-drager {
+    &.border {
+      outline: none;
+    }
+    &-dot,
+    &-rotate {
+      display: none;
+    }
+  }
+}
diff --git a/src/assets/styles/editor.less b/src/assets/styles/editor.less
new file mode 100644
index 0000000000000000000000000000000000000000..1f1a6bb0f12efdd5d1fbe11654d267ee69b04eec
--- /dev/null
+++ b/src/assets/styles/editor.less
@@ -0,0 +1,358 @@
+@import '@/assets/styles/_mixins.less';
+
+.editor-container {
+  flex: 1;
+  width: 100%;
+  &.show-line-number {
+    .umo-editor {
+      > *:not([data-line-number='false']):not(div) {
+        position: relative;
+        &::before {
+          position: absolute;
+          content: counter(title) '.';
+          counter-increment: title;
+          right: 100%;
+          margin-right: 20px;
+          color: var(--umo-content-line-number-color);
+          font-family: var(--umo-font-family);
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+  .umo-editor {
+    height: 100%;
+    width: 100%;
+    outline: none;
+    counter-reset: title;
+    > * {
+      position: relative;
+      + * {
+        margin-top: var(--umo-content-node-bottom);
+      }
+      &.node-focused {
+        &:not(hr):not(.page-break):not(.tableWrapper):before {
+          content: '';
+          display: block;
+          position: absolute;
+          left: -8px;
+          top: -5px;
+          right: -8px;
+          bottom: -5px;
+          border-radius: var(--umo-radius);
+          background: var(--umo-content-table-thead-background);
+          pointer-events: none;
+          z-index: -1;
+        }
+        // background: var(--umo-content-node-selected-background);
+        &.page-divider {
+          color: var(--umo-primary-color) !important;
+        }
+        &.page-break {
+          background-color: var(--umo-primary-color);
+          color: var(--umo-primary-color);
+          &::after {
+            border-color: var(--umo-primary-color);
+          }
+        }
+        .select-outline {
+          outline: solid 1px var(--umo-primary-color);
+        }
+      }
+      + div.node-focused::before {
+        top: -8px !important;
+        bottom: -8px !important;
+      }
+    }
+    .is-editor-empty {
+      &:first-child {
+        > * {
+          display: none;
+        }
+        &::before {
+          color: var(--umo-content-placeholder-color);
+          content: attr(data-placeholder);
+          float: left;
+          height: 0;
+          pointer-events: none;
+        }
+      }
+    }
+  }
+  a {
+    color: var(--umo-primary-color);
+    text-decoration: none;
+    cursor: pointer;
+    &:hover {
+      opacity: 0.8;
+      text-decoration: underline;
+    }
+  }
+  code {
+    color: var(--umo-content-code-color);
+    background-color: var(--umo-content-code-background);
+    font-family: var(--umo-content-code-family);
+    border-radius: 3px;
+    padding: 0.1em 0.4em;
+  }
+  ul,
+  ol {
+    list-style-position: inside;
+    padding-left: 0;
+    li {
+      padding: 0.25em 0 0.25em 3px;
+      p {
+        display: inline;
+      }
+    }
+  }
+  ol li p {
+    margin-left: 0.25em;
+  }
+  blockquote {
+    border-left: 3px solid var(--umo-primary-color);
+    padding: 0.5em 1em;
+    color: var(--umo-text-color-light);
+    background-color: rgba(0, 0, 0, 0.03);
+  }
+  .indent-1 {
+    text-indent: 2em;
+  }
+  .indent-2 {
+    text-indent: 4em;
+  }
+  .indent-3 {
+    text-indent: 6em;
+  }
+  .indent-4 {
+    text-indent: 8em;
+  }
+  .indent-5 {
+    text-indent: 10em;
+  }
+  .tableWrapper {
+    max-width: 100%;
+    overflow-x: auto;
+    .scrollbar();
+    table {
+      border-collapse: collapse;
+      table-layout: fixed;
+      width: 100%;
+      margin: 0;
+      overflow: hidden;
+      td,
+      th {
+        min-width: 1em;
+        border: 1px solid var(--umo-content-table-border-color);
+        padding: 3px 5px;
+        vertical-align: middle;
+        box-sizing: border-box;
+        position: relative;
+        > * {
+          margin-bottom: 0;
+        }
+        &[data-align='left-top'] {
+          vertical-align: top;
+          text-align: left;
+        }
+        &[data-align='center-top'] {
+          vertical-align: top;
+          text-align: center;
+        }
+        &[data-align='right-top'] {
+          vertical-align: middle;
+          text-align: right;
+        }
+        &[data-align='justify-top'] {
+          vertical-align: middle;
+          text-align: justify;
+        }
+        &[data-align='left-middle'] {
+          vertical-align: middle;
+          text-align: left;
+        }
+        &[data-align='center-middle'] {
+          vertical-align: middle;
+          text-align: center;
+        }
+        &[data-align='right-middle'] {
+          vertical-align: middle;
+          text-align: right;
+        }
+        &[data-align='justify-middle'] {
+          vertical-align: middle;
+          text-align: justify;
+        }
+        &[data-align='left-bottom'] {
+          vertical-align: bottom;
+          text-align: left;
+        }
+        &[data-align='center-bottom'] {
+          vertical-align: middle;
+          text-align: center;
+        }
+        &[data-align='right-bottom'] {
+          vertical-align: bottom;
+          text-align: right;
+        }
+        &[data-align='justify-bottom'] {
+          vertical-align: bottom;
+          text-align: justify;
+        }
+      }
+      th {
+        font-weight: bold;
+        text-align: left;
+        background-color: var(--umo-content-table-thead-background);
+      }
+      .selectedCell:after {
+        z-index: 2;
+        position: absolute;
+        content: '';
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        background: var(--umo-content-table-selected-background);
+        pointer-events: none;
+      }
+      .column-resize-handle {
+        position: absolute;
+        right: -1px;
+        top: 0;
+        bottom: -1px;
+        width: 3px;
+        background-color: var(--umo-primary-color);
+        pointer-events: none;
+      }
+      p {
+        margin: 0;
+      }
+    }
+  }
+  .resize-cursor {
+    cursor: ew-resize;
+    cursor: col-resize;
+  }
+  .task-list {
+    list-style: none;
+    padding: 0;
+    li {
+      display: flex;
+      align-items: center;
+      &[data-checked='true'] {
+        p {
+          opacity: 0.5;
+          text-decoration: line-through;
+          &:has([style]) {
+            text-decoration: inherit;
+          }
+          * {
+            text-decoration: line-through;
+          }
+        }
+      }
+      > label {
+        flex: 0 0 auto;
+        margin-right: 10px;
+        user-select: none;
+      }
+      > div {
+        flex: 1 1 auto;
+      }
+    }
+    input[type='checkbox'] {
+      cursor: pointer;
+      font-family: unset;
+      color: var(--umo-primary-color);
+      border: 1px solid var(--umo-primary-color);
+      border-radius: 0;
+      margin: 0.25em;
+      width: 16px;
+      height: 16px;
+      padding: 0.1em 0.4em;
+      background: white;
+      opacity: 0.5;
+    }
+  }
+  .search-result {
+    background-color: var(--umo-content-search-result-background);
+    &-current {
+      background: var(--umo-content-search-result-current-background);
+    }
+  }
+  .page-break {
+    display: block;
+    width: 100%;
+    height: 1px;
+    background: var(--umo-content-node-border);
+    break-before: page;
+    margin-top: 30px;
+    margin-bottom: 30px;
+    position: relative;
+    &::after {
+      content: '分页符';
+      font-size: 10px;
+      border: solid 1px var(--umo-content-node-border);
+      padding: 1px 8px;
+      border-radius: 2px;
+      background-color: var(--umo-color-white);
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+  .page-divider {
+    .page-divider();
+  }
+  .node-view {
+    display: flex;
+    position: relative;
+    .hover-shadow:hover {
+      box-shadow: var(--umo-shadow);
+    }
+  }
+  // 插件样式
+  .ProseMirror-gapcursor {
+    &:after {
+      width: 1px;
+      height: 16px;
+      background-color: var(--umo-color-black);
+    }
+  }
+  .Tiptap-invisible-character {
+    text-indent: 0;
+    &--break::before {
+      content: '↓';
+      color: var(--umo-content-invisible-break-color);
+    }
+    &--paragraph::before {
+      content: '↵';
+      color: var(--umo-content-invisible-break-color);
+    }
+  }
+  .Tiptap-mathematics {
+    &-editor {
+      background: var(--umo-button-hover-background);
+      font-family: monospace;
+      padding: 0.2em 0.5em;
+      // outline: solid 1px var(--umo-primary-color);
+    }
+    &-render {
+      cursor: pointer;
+      padding: 0 0.25em;
+      transition: background 0.2s;
+
+      &:hover {
+        background: var(--umo-button-hover-background);
+      }
+    }
+    &-editor,
+    &-render {
+      border-radius: 0.2em;
+      display: inline-block;
+    }
+  }
+}
diff --git a/src/assets/styles/index.less b/src/assets/styles/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..bb22b3bd9f1e969d78be1e5d546dcbc4aea68ca2
--- /dev/null
+++ b/src/assets/styles/index.less
@@ -0,0 +1,12 @@
+@import './_variables.less';
+@import './_mixins.less';
+@import './tdesign.less';
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.umo-scrollbar {
+  .scrollbar();
+}
diff --git a/src/assets/styles/plyr.less b/src/assets/styles/plyr.less
new file mode 100644
index 0000000000000000000000000000000000000000..82467ba0a107306ab74ca1008d1f7925854f3d9e
--- /dev/null
+++ b/src/assets/styles/plyr.less
@@ -0,0 +1,11 @@
+.plyr {
+  --plyr-color-main: var(--umo-primary-color);
+  --plyr-badge-border-radius: var(--umo-radius);
+  --plyr-menu-arrow-size: 0;
+  --plyr-menu-item-arrow-size: 0;
+  --plyr-tooltip-color: var(--umo-text-color);
+  --plyr-tooltip-arrow-size: 0;
+  --plyr-tooltip-radius: 2px;
+  --plyr-tooltip-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  border-radius: var(--umo-radius);
+}
diff --git a/src/assets/styles/tdesign.less b/src/assets/styles/tdesign.less
new file mode 100644
index 0000000000000000000000000000000000000000..0c34eeaeda53634176e78a6b4af4c342a8b2849b
--- /dev/null
+++ b/src/assets/styles/tdesign.less
@@ -0,0 +1,248 @@
+@import 'tdesign-vue-next/esm/_common/style/web/_global.less';
+@import 'tdesign-vue-next/esm/_common/style/web/theme/_index.less';
+
+.umo-popup {
+  --td-radius-medium: var(--umo-radius);
+  --td-warning-color: var(--umo-warning-color);
+  --td-error-color: var(--umo-error-color);
+  &.umo-tooltip {
+    --td-font-size-body-medium: var(--umo-font-size-small);
+    .umo-popup__content {
+      padding: 5px 12px;
+      &:empty {
+        display: none;
+      }
+    }
+  }
+  .umo-dropdown {
+    &__menu {
+      padding: var(--td-pop-padding-s);
+      max-height: var(--umo-popup-max-height) !important;
+    }
+    &__item {
+      font-size: var(--umo-font-size-small);
+      padding: 2px var(--td-comp-paddingLR-s);
+      min-width: 80px !important;
+    }
+  }
+  &.umo-select__dropdown {
+    .umo-popup__content {
+      box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top),
+        var(--td-shadow-inset-right), var(--td-shadow-inset-bottom),
+        var(--td-shadow-inset-left);
+      max-height: var(--umo-popup-max-height);
+    }
+    .umo-select-option {
+      &-group__header {
+        font-size: var(--umo-font-size-small);
+      }
+      &.umo-size-s {
+        height: 26px;
+      }
+    }
+  }
+  &__content {
+    padding: 0;
+  }
+}
+.umo-toolbar {
+  .umo-input.umo-size-s {
+    --td-comp-paddingLR-s: 5px;
+    &.umo-input--suffix {
+      padding-right: 2px !important;
+    }
+    &__suffix {
+      &:not(:empty) {
+        margin-left: 0 !important;
+      }
+    }
+  }
+}
+.umo-input--focused {
+  --td-brand-color-focus: transparent;
+}
+.umo-button {
+  user-select: none;
+}
+.umo-color-picker__panel {
+  padding: var(--umo-popup-content-padding) !important;
+  .umo-color-picker__body {
+    padding: 0;
+    .umo-color-picker__swatches-wrap {
+      display: none;
+    }
+  }
+}
+.umo-dialog,
+.t-dialog {
+  --td-warning-color: var(--umo-warning-color);
+  --td-error-color: var(--umo-error-color);
+  box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top),
+    var(--td-shadow-inset-right), var(--td-shadow-inset-bottom),
+    var(--td-shadow-inset-left);
+  border: none;
+  border-radius: var(--umo-radius);
+  color: var(--umo-text-color);
+  &__mask {
+    position: absolute !important;
+  }
+  &__ctx {
+    --td-mask-active: var(--umo-mask-color);
+    .umo-dialog__wrap,
+    .t-dialog__wrap {
+      position: absolute;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+    &--fixed,
+    &--modeless {
+      position: absolute !important;
+    }
+    &--fixed {
+      .umo-dialog,
+      .t-dialog {
+        &__mask {
+          background: rgba(255, 255, 255, 0.45);
+          backdrop-filter: blur(5px);
+        }
+      }
+    }
+  }
+  &:not(.umo-dialog__fullscreen):not(.t-dialog__fullscreen) {
+    padding: 22px 25px 25px;
+  }
+  &__fullscreen {
+    border-radius: 0;
+    display: flex;
+    flex-direction: column;
+    box-shadow: none;
+  }
+  &__header {
+    background: none;
+    &-content {
+      display: flex;
+      font-size: 18px;
+      font-weight: 400;
+      align-items: center;
+      > .icon {
+        margin-right: 8px;
+        font-size: 24px;
+      }
+    }
+    &--fullscreen {
+      min-height: 58px;
+      padding: 0 15px;
+      border-bottom: solid 1px var(--umo-border-color);
+      .umo-dialog__header-content,
+      .t-dialog__header-content {
+        justify-content: flex-start;
+      }
+    }
+  }
+  &__close {
+    color: rgba(0, 0, 0, 0.3);
+    &:hover {
+      color: rgba(0, 0, 0, 0.6);
+    }
+  }
+  &__body {
+    &--fullscreen {
+      flex: 1;
+      padding: 0;
+    }
+  }
+  &__footer {
+    padding-top: 5px;
+    &--fullscreen {
+      padding: 15px;
+      border-top: solid 1px var(--umo-border-color);
+    }
+  }
+
+  .umo-dialog__body__icon,
+  .t-dialog__body__icon {
+    word-break: break-all;
+  }
+}
+
+.umo-slider {
+  &__button {
+    --td-comp-size-xxxs: 10px;
+  }
+}
+
+.umo-drawer {
+  &__mask {
+    --td-mask-active: var(--umo-mask-color);
+  }
+  &__close-btn {
+    color: rgba(0, 0, 0, 0.3);
+    &:hover {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    .umo-icon {
+      font-size: 20px;
+    }
+  }
+}
+
+.umo-radio-group--filled {
+  --td-bg-color-component: var(--umo-button-hover-background);
+}
+
+.umo-input-number.umo-is-controls-right {
+  .umo-input-number__decrease,
+  .umo-input-number__increase {
+    width: 18px;
+  }
+  .umo-input {
+    padding-right: 26px;
+  }
+}
+
+.umo-dropdown {
+  &__menu {
+    --td-pop-padding-s: 10px;
+  }
+  &__item {
+    max-width: 200px !important;
+  }
+  .umo-divider--horizontal {
+    margin: 6px 0;
+    width: 100%;
+    background-color: var(--umo-border-color-light);
+  }
+}
+.umo-select {
+  &__list {
+    --td-pop-padding-s: 10px;
+  }
+  .umo-is-disabled {
+    background-color: transparent;
+  }
+}
+.umo-color-picker {
+  &__sliders-preview-inner {
+    border: solid 1px var(--umo-border-color);
+    box-sizing: border-box;
+    border-radius: 3px;
+  }
+}
+.umo-image-viewer__modal {
+  &-mask {
+    background-color: rgba(255, 255, 255, 0.95) !important;
+  }
+  &-header {
+    border-bottom: solid 1px var(--umo-border-color-light);
+  }
+  &-icon {
+    opacity: 0.5;
+  }
+}
+.umo-message,
+.t-message {
+  &__list {
+    position: absolute;
+  }
+}
diff --git a/src/components_umo/color-picker.vue b/src/components_umo/color-picker.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3abb2a2ab5c55039b57d3d7e38b8070a438deab0
--- /dev/null
+++ b/src/components_umo/color-picker.vue
@@ -0,0 +1,186 @@
+<template>
+  <div class="color-picker-container">
+    <div class="color-picker-default-button">
+      <t-button
+        theme="default"
+        variant="outline"
+        size="small"
+        block
+        @click="selectColor(color)"
+      >
+        默认颜色
+      </t-button>
+    </div>
+    <div class="color-picker-group">
+      <div
+        class="color-picker-item"
+        v-for="(item, index) in options.dicts.colors"
+        :key="index"
+        :style="{ backgroundColor: item }"
+        @click="selectColor(item)"
+      ></div>
+    </div>
+    <div class="color-picker-group-title">标准色</div>
+    <div class="color-picker-group">
+      <div
+        class="color-picker-item"
+        v-for="(item, index) in standardColors"
+        :key="index"
+        :style="{ backgroundColor: item }"
+        @click="selectColor(item)"
+      ></div>
+    </div>
+    <div class="color-picker-group-title" v-if="$recent.colors.length > 0">
+      最近使用
+    </div>
+    <div class="color-picker-group" v-if="$recent.colors.length > 0">
+      <div
+        class="color-picker-item"
+        v-for="(item, index) in $recent.colors"
+        :key="index"
+        :style="{ backgroundColor: item }"
+        @click="selectColor(item)"
+      ></div>
+    </div>
+    <div class="color-picker-divider"></div>
+    <t-popup
+      :attach="container"
+      trigger="click"
+      placement="right-bottom"
+      @visible-change="(visible) => (moreColorPicker = visible)"
+    >
+      <div class="color-picker-more" :class="{ active: moreColorPicker }">
+        <div class="color-picker-more-menu">
+          <icon :style="{ color }" name="palette-color" />
+          <span>更多颜色</span>
+        </div>
+        <div class="color-picker-more-arrow">
+          <icon name="arrow-down" />
+        </div>
+      </div>
+      <template #content>
+        <t-color-picker-panel
+          v-model="color"
+          size="small"
+          :color-modes="['monochrome']"
+          :swatch-colors="[]"
+          enable-alpha
+          @change="colorChange"
+        />
+      </template>
+    </t-popup>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  defaultColor: {
+    type: String,
+    default: '#000',
+  },
+})
+const emits = defineEmits(['change'])
+
+const { container, options } = useStore()
+const $recent = useState('recent')
+// prettier-ignore
+const standardColors = ['#B12318', '#EB3323', '#F6C143', '#FFFE55', '#A0CD63', '#4FAD5B', '#4CAFEA', '#2D70BA', '#06215C', '#68389B']
+
+const color = $ref(props.defaultColor)
+
+// 更多颜色
+const moreColorPicker = $ref(false)
+const colorChange = (color, ctx) => {
+  if (ctx && ctx.trigger !== 'palette-saturation-brightness') {
+    return
+  }
+  $recent.value.colors.forEach((item, index) => {
+    if (item === color) {
+      $recent.value.colors.splice(index, 1)
+    }
+  })
+  $recent.value.colors.unshift(color)
+  if ($recent.value.colors.length > 10) {
+    $recent.value.colors.splice(10, 1)
+  }
+  emits('change', color)
+}
+
+// 选择颜色
+const selectColor = (color) => {
+  colorChange(color)
+  emits('change', color)
+}
+</script>
+
+<style lang="less" scoped>
+.color-picker {
+  &-container {
+    width: 236px;
+  }
+  &-default-button {
+    .umo-button {
+      height: 28px;
+    }
+  }
+  &-group {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 8px 0;
+    gap: 4px;
+    &-title {
+      color: var(--umo-text-color-light);
+      font-size: 12px;
+      margin: 5px 0 2px;
+    }
+  }
+  &-item {
+    width: 20px;
+    height: 20px;
+    border: solid 1px rgba(0, 0, 0, 0.1);
+    margin-bottom: 2px;
+    flex-basis: 20px;
+    box-sizing: border-box;
+    transition: all 0.2s;
+    cursor: pointer;
+    border-radius: 3px;
+    &:hover {
+      transform: scale(1.1);
+      border-color: rgba(0, 0, 0, 0.3);
+    }
+  }
+  &-divider {
+    height: 1px;
+    background-color: var(--umo-border-color-light);
+    margin: 10px 0;
+  }
+  &-more {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+    cursor: pointer;
+    &:hover,
+    &.active {
+      background-color: var(--td-bg-color-container-hover);
+      border-radius: var(--umo-radius);
+    }
+    &-menu {
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      color: var(--umo-text-color-light);
+      cursor: pointer;
+      .icon {
+        margin-right: 5px;
+        font-size: 18px;
+      }
+    }
+    &-arrow {
+      .icon {
+        transform: rotate(-90deg);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components_umo/icon.vue b/src/components_umo/icon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2a6d2963c805ea6ab5cdff0618926883d0f1f5cc
--- /dev/null
+++ b/src/components_umo/icon.vue
@@ -0,0 +1,28 @@
+<template>
+  <svg class="icon" aria-hidden="true" :width="size" :height="size">
+    <use :xlink:href="`#icon-${props.name}`" :fill="color" />
+  </svg>
+</template>
+
+<script setup>
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  size: {
+    type: String,
+    default: '1em',
+  },
+  color: {
+    type: String,
+    default: 'currentcolor',
+  },
+})
+</script>
+
+<style lang="less">
+.icon {
+  display: flex;
+}
+</style>
diff --git a/src/components_umo/index.js b/src/components_umo/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..3f3e2c10e0a1bb6767c66fbca7bd57fcbc6ab1da
--- /dev/null
+++ b/src/components_umo/index.js
@@ -0,0 +1,13 @@
+import "virtual:svg-icons-register";
+import UmoEditor from "./index.vue";
+
+const useUmoEditor = {
+  install: (app, options) => {
+    const { setOptions } = useStore();
+    setOptions(options);
+    // app.config.warnHandler = () => null
+    app.component(UmoEditor.name, UmoEditor);
+  }
+};
+
+export { UmoEditor as default, useUmoEditor, UmoEditor };
diff --git a/src/components_umo/index.vue b/src/components_umo/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d28c0a5eb2590dc9266683daeeea7763b4c4a52e
--- /dev/null
+++ b/src/components_umo/index.vue
@@ -0,0 +1,548 @@
+<template>
+  <t-config-provider :global-config="globalConfig">
+    <div
+      :id="container.substr(1)"
+      class="umo-editor-container"
+      :class="{
+        'toolbar-classic': $toolbar.mode === 'classic',
+        'toolbar-ribbon': $toolbar.mode === 'ribbon',
+        'toolbar-source': $toolbar.mode === 'source',
+        'preview-mode': page.preview.enabled,
+        'laser-pointer': page.preview.enabled && page.preview.laserPointer
+      }"
+      :style="{ height: options.height }"
+    >
+      <header class="umo-toolbar">
+        <toolbar :key="toolbarKey" @menu-change="menuChange" />
+      </header>
+      <main class="umo-main">
+        <PageEditorDeflate />
+        <!-- <container-page v-if="$toolbar.mode !== 'source'" />
+        <editor-source v-else /> -->
+      </main>
+      <!-- <footer v-if="$toolbar.mode !== 'source'" class="umo-footer">
+        <statusbar />
+      </footer> -->
+    </div>
+  </t-config-provider>
+</template>
+
+<script setup>
+import { toBlob, toJpeg, toPng } from "dom-to-image-more";
+import { propsOptions } from "./options";
+import "@/assets/styles/index.less";
+import { onBeforeUnmount } from "vue";
+import PageEditorDeflate from "@/views/PageEditorDeflate.vue";
+defineOptions({ name: "UmoEditor" });
+
+const props = defineProps(propsOptions);
+console.log(props,'propsprops')
+const emits = defineEmits([
+  "beforeCreate",
+  "created",
+  "changed",
+  "changed:selection",
+  "changed:transaction",
+  "changed:menu",
+  "changed:toolbar",
+  "changed:pageSize",
+  "changed:pageOrientation",
+  "changed:pageMargin",
+  "changed:pageBackground",
+  "changed:pageShowToc",
+  "changed:pagePreview",
+  "changed:pageZoom",
+  "changed:pageWatermark",
+  "print",
+  "focus",
+  "blur",
+  "saved",
+  "destroy"
+]);
+
+onBeforeMount(() => setOptions(props));
+
+const { container, toolbarKey, options, page, savedAt, editorDestroyed, editor, setOptions, printing, resetStore } = useStore();
+const $toolbar = useState("toolbar", props.editorKey);
+const $document = useState("document", props.editorKey);
+watch(
+  () => props,
+  () => setOptions(props),
+  { deep: true }
+);
+
+// 全局设置
+const globalConfig = {
+  classPrefix: "umo"
+};
+
+// 对外暴露的编辑器方法
+const setToolbar = (parmas) => {
+  if (!parmas instanceof Object) throw new Error("parmas must be an object.");
+  if (parmas.mode) {
+    if (typeof parmas.mode !== "string") {
+      throw new Error('"parmas.size" must be a string.');
+    }
+    if (parmas.mode && !["classic", "ribbon"].includes(parmas.mode)) {
+      throw new Error('"parmas.mode" must be one of "classic" or "ribbon".');
+    }
+    $toolbar.value.mode = parmas.mode;
+  }
+  if (parmas.show !== undefined) {
+    if (typeof parmas.show !== "boolean") {
+      throw new Error('"parmas.show" must be a boolean.');
+    }
+    $toolbar.value.show = parmas.show;
+  }
+};
+const setPage = (parmas) => {
+  if (!parmas instanceof Object) throw new Error("parmas must be an object.");
+  if (parmas.size) {
+    if (typeof parmas.size !== "string") throw new Error('"parmas.size" must be a string.');
+    const size = options.value.dicts.pageSizes.find((item) => item.label === parmas.size);
+    if (!size) throw new Error(`"parmas.size" must be one of ${options.value.dicts.pageSizes.map((item) => item.label)}.`);
+    page.value.size = size;
+  }
+  if (parmas.orientation) {
+    if (typeof parmas.orientation !== "string") {
+      throw new Error('"parmas.orientation" must be a string.');
+    }
+    if (!["horizontal", "vertical"].includes(parmas.orientation)) {
+      throw new Error('"parmas.mode" must be one of "classic" or "ribbon".');
+    }
+    page.value.orientation = parmas.orientation;
+  }
+
+  if (parmas.background) {
+    if (typeof parmas.background !== "string") {
+      throw new Error('"parmas.background" must be a string.');
+    }
+    page.value.background = parmas.background;
+  }
+  if (parmas.showBreakMarks !== undefined) {
+    if (typeof parmas.showBreakMarks !== "boolean") {
+      throw new Error('"parmas.showBreakMarks" must be a boolean.');
+    }
+    page.value.showBreakMarks = parmas.showBreakMarks;
+    if (parmas.showBreakMarks) {
+      editor.value.commands.showInvisibleCharacters();
+    } else {
+      editor.value.commands.hideInvisibleCharacters();
+    }
+  }
+};
+const setWatermark = (parmas) => {
+  if (!parmas instanceof Object) throw new Error("parmas must be an object.");
+  if (parmas.alpha !== undefined) {
+    if (typeof parmas.alpha !== "number") {
+      throw new Error('"parmas.alpha" must be a number.');
+    }
+    page.value.watermark.alpha = parmas.alpha;
+  }
+  if (parmas.text) {
+    if (typeof parmas.text !== "string") {
+      throw new Error('"parmas.text" must be a string.');
+    }
+    if (parmas.text.length > 30) {
+      throw new Error('"parmas.text" must be less than 30 characters.');
+    }
+    page.value.watermark.text = parmas.text;
+  }
+
+  if (parmas.type) {
+    if (typeof parmas.type !== "string") {
+      throw new Error('"parmas.type" must be a string.');
+    }
+    if (!["compact", "spacious"].includes(parmas.type)) {
+      throw new Error('"parmas.type" must be one of "compact" or "spacious".');
+    }
+    page.value.watermark.type = parmas.type;
+  }
+  if (parmas.fontColor) {
+    if (typeof parmas.fontColor !== "string") {
+      throw new Error('"parmas.fontColor" must be a string.');
+    }
+    page.value.watermark.fontColor = parmas.fontColor;
+  }
+  if (parmas.fontSize) {
+    if (typeof parmas.fontSize !== "number") {
+      throw new Error('"parmas.fontSize" must be a number.');
+    }
+    page.value.watermark.fontSize = parmas.fontSize;
+  }
+  if (parmas.fontFamily || parmas.fontFamily === null) {
+    if (parmas.fontFamily !== null && typeof parmas.fontFamily !== "string") {
+      throw new Error('"parmas.fontFamily" must be a string.');
+    }
+    page.value.watermark.fontFamily = parmas.fontFamily;
+  }
+  if (parmas.fontWeight) {
+    if (typeof parmas.fontWeight !== "string") {
+      throw new Error('"parmas.fontWeight" must be a string.');
+    }
+    if (!["normal", "bold", "bolder"].includes(parmas.fontWeight)) {
+      throw new Error('"parmas.fontWeight" must be one of "normal", "bold" or "bolder".');
+    }
+
+    page.value.watermark.fontWeight = parmas.fontWeight;
+  }
+};
+const setDocument = (parmas) => {
+  if (!parmas instanceof Object) throw new Error("parmas must be an object.");
+  if (parmas.title) {
+    if (typeof parmas.title !== "string") {
+      throw new Error('"parmas.title" must be a string.');
+    }
+    const title = parmas.title !== "" ? parmas.title : "未命名文档";
+    $document.value.title = title;
+    options.value.document.title = title;
+  }
+  if (parmas.bubbleMenu !== undefined) {
+    if (typeof parmas.bubbleMenu !== "boolean") {
+      throw new Error('"parmas.bubbleMenu" must be a boolean.');
+    }
+    options.value.document.bubbleMenu = parmas.bubbleMenu;
+  }
+  if (parmas.blockMenu !== undefined) {
+    if (typeof parmas.blockMenu !== "boolean") {
+      throw new Error('"parmas.blockMenu" must be a boolean.');
+    }
+    options.value.document.blockMenu = parmas.blockMenu;
+  }
+  if (parmas.markdown !== undefined) {
+    if (typeof parmas.markdown !== "boolean") {
+      throw new Error('"parmas.markdown" must be a boolean.');
+    }
+    $document.value.markdown = parmas.markdown;
+  }
+  if (parmas.spellcheck !== undefined) {
+    if (typeof parmas.spellcheck !== "boolean") {
+      throw new Error('"parmas.spellcheck" must be a boolean.');
+    }
+    $document.value.spellcheck = parmas.spellcheck;
+  }
+  if (parmas.autoSave) {
+    if (typeof parmas.autoSave?.enabled !== "boolean") {
+      throw new Error('"parmas.autoSave.enabled" must be a boolean.');
+    }
+    options.value.document.autoSave.enabled = parmas.autoSave.enabled;
+    if (parmas.autoSave?.interval !== "number") {
+      throw new Error('"parmas.autoSave.interval" must be a number.');
+    }
+    options.value.document.autoSave.interval = parmas.autoSave.interval;
+  }
+};
+const setContent = (content) => {
+  if (!editor.value) throw new Error("editor is not ready!");
+  editor.value.chain().setContent(content).focus().run();
+};
+const getContent = (format = "html") => {
+  if (!editor.value) throw new Error("editor is not ready!");
+  if (format === "html") return editor.value.getHTML();
+  if (format === "text") return editor.value.getText();
+  if (format === "json") return editor.value.getJSON();
+  throw new Error("format must be html, text or json");
+};
+const getImage = async (format = "blob") => {
+  const zoomLevel = page.value.zoomLevel;
+  try {
+    page.value.zoomLevel = 100;
+    const node = document.querySelector(`${container} .page-content`);
+    if ((format = "blob")) {
+      const blob = await toBlob(node);
+      return blob;
+    }
+    if ((format = "jpeg")) {
+      const image = await toJpeg(node);
+      return image;
+    }
+    if ((format = "png")) {
+      const image = await toPng(node);
+      return image;
+    }
+  } catch {
+    throw new Error("导出图片失败，请重试或尝试刷新页面。");
+  } finally {
+    page.value.zoomLevel = zoomLevel;
+  }
+};
+const getText = () => getContent("text");
+const getHTML = () => getContent("html");
+const getJSON = () => getContent("json");
+const saveContent = async () => {
+  if ($toolbar.value.mode === "source" || options.value.document.readOnly) {
+    return;
+  }
+  try {
+    let message = await useMessage(
+      "loading",
+      {
+        content: "正在保存文档内容...",
+        placement: "bottom",
+        closeBtn: true,
+        offset: [0, -20]
+      },
+      0
+    );
+    const success = await options.value.onSave(
+      {
+        html: editor.value.getHTML(),
+        json: editor.value.getJSON(),
+        text: editor.value.getHTML()
+      },
+      page.value,
+      $document.value
+    );
+    if (!success) {
+      message.close();
+      message = useMessage("error", {
+        content: "文档内容失败，请重试！",
+        placement: "bottom",
+        offset: [0, -20]
+      });
+      return;
+    }
+    emits("saved");
+    message.close();
+    useMessage("success", {
+      content: "文档内容保存成功！",
+      placement: "bottom",
+      offset: [0, -20]
+    });
+    const time = useTimestamp({ offset: 0 });
+    savedAt.value = time.value;
+  } catch (e) {
+    useMessage("error", {
+      content: "文档内容保存出错！",
+      placement: "bottom",
+      offset: [0, -20]
+    });
+    console.error(e.message);
+  }
+};
+const getContentExcerpt = (charLimit = 100, more = " ...") => {
+  const text = editor.value.getText();
+  if (text.length === 0) return "";
+  return text.substring(0, charLimit) + more;
+};
+const print = () => {
+  const { toolbar, document } = options.value;
+  if (toolbar.disableMenuItems.includes("print")) return;
+  if ($toolbar.value.mode !== "source" && !document.readOnly) {
+    printing.value = true;
+  }
+};
+const focus = (position = "start") => editor.value.commands.focus(position);
+const blur = () => editor.value.chain().blur().run();
+const reset = (silent) => {
+  const resetFn = () => {
+    localStorage.clear();
+    location.reload();
+  };
+  if (silent) {
+    resetFn();
+    return;
+  }
+  const dialog = useConfirm({
+    theme: "warning",
+    header: "重置编辑器",
+    body: "此操作会清空所有的编辑器设置数据，包括当前编辑的内容，并刷新页面，建议保存内容后再重置，确定要现在重置吗？",
+    confirmBtn: {
+      theme: "warning",
+      content: "立即重置"
+    },
+    onConfirm() {
+      dialog.destroy();
+      resetFn();
+    }
+  });
+};
+
+defineExpose({
+  getOptions: () => options.value,
+  setOptions,
+  setToolbar,
+  setPage,
+  setWatermark,
+  setDocument,
+  setContent,
+  getContent,
+  getImage,
+  getText,
+  getHTML,
+  getJSON,
+  saveContent,
+  getContentExcerpt,
+  getEditor: () => editor,
+  setReadOnly(readOnly = true) {
+    options.value.document.readOnly = readOnly;
+  },
+  print,
+  focus,
+  blur,
+  reset,
+  useAlert,
+  useConfirm,
+  useMessage,
+  destroy: () => {
+    resetStore();
+    editor.value.destroy();
+  }
+});
+
+// 定时保存
+let contentUpdated = $ref(false);
+let isFirstUpdate = $ref(true);
+let autoSaveInterval = $ref(null);
+const clearAutoSaveInterval = () => {
+  if (autoSaveInterval !== null) {
+    clearInterval(autoSaveInterval);
+    autoSaveInterval = null;
+  }
+};
+watch(
+  () => contentUpdated,
+  (val) => {
+    const { autoSave } = options.value.document;
+    if (!autoSave.enabled) return;
+    if (isFirstUpdate) {
+      isFirstUpdate = false;
+      setTimeout(() => (contentUpdated = false));
+      return;
+    }
+    if (!val) {
+      clearAutoSaveInterval();
+      return;
+    }
+    autoSaveInterval = setInterval(() => {
+      saveContent();
+      contentUpdated = false;
+      clearAutoSaveInterval();
+    }, autoSave.interval);
+  }
+);
+onBeforeUnmount(() => {
+  clearAutoSaveInterval();
+});
+
+// 编辑器事件
+emits("beforeCreate");
+watch(
+  () => editor.value,
+  () => {
+    console.log(editor.value,editor.value.on,'editor.value')
+    if (!editor.value) return;
+    editor.value.on("create", ({ editor }) => emits("created", { editor }));
+    editor.value.on("update", ({ editor }) => {
+      emits("changed", { editor });
+      contentUpdated = true;
+    });
+    editor.value.on("selectionUpdate", ({ editor }) => {
+      emits("changed:selection", { editor });
+    });
+    editor.value.on("transaction", ({ editor, transaction }) => emits("changed:transaction", { editor, transaction }));
+    editor.value.on("focus", ({ editor, event }) => emits("focus", { editor, event }));
+    editor.value.on("blur", ({ editor, event }) => emits("blur", { editor, event }));
+    editor.value.on("destroy", () => {
+      resetStore();
+      emits("destroy");
+    });
+  }
+);
+const menuChange = (menu) => emits("changed:menu", menu);
+watch(
+  () => $toolbar.value,
+  (toolbar, oldToolbar) => {
+    emits("changed:toolbar", { toolbar, oldToolbar });
+  },
+  { deep: true }
+);
+watch(
+  () => page.value.size,
+  (pageSize, oldPageSize) => emits("changed:pageSize", { pageSize, oldPageSize }),
+  { deep: true }
+);
+watch(
+  () => page.value.margin,
+  (pageMargin, oldPageMargin) => emits("changed:pageMargin", { pageMargin, oldPageMargin }),
+  { deep: true }
+);
+watch(
+  () => page.value.background,
+  (pageBackground, oldPageBackground) => emits("changed:pageBackground", { pageBackground, oldPageBackground })
+);
+watch(
+  () => page.value.orientation,
+  (pageOrientation, oldPageOrientation) => emits("changed:pageOrientation", { pageOrientation, oldPageOrientation })
+);
+watch(
+  () => page.value.showToc,
+  (showToc) => emits("changed:pageShowToc", showToc)
+);
+watch(
+  () => page.value.zoomLevel,
+  (zoomLevel, oldZoomLevel) => emits("changed:pageZoom", { zoomLevel, oldZoomLevel })
+);
+watch(
+  () => page.value.preview.enabled,
+  (previewEnabled) => emits("changed:pagePreview", previewEnabled)
+);
+watch(
+  () => page.value.watermark,
+  (pageWatermark, oldPageWatermark) => emits("changed:pageWatermark", { pageWatermark, oldPageWatermark }),
+  { deep: true }
+);
+watch(
+  () => printing.value,
+  () => emits("print"),
+  { deep: true }
+);
+
+// 将方法传递给子孙组件使用
+provide("saveContent", saveContent);
+provide("reset", reset);
+
+// 快捷键
+useHotkeys("ctrl+s,command+s", saveContent);
+useHotkeys("ctrl+p,command+p", print);
+
+// 工具栏切换时重置编辑器
+watch(
+  () => $toolbar.value.mode,
+  (val) => (editorDestroyed.value = val === "source")
+);
+</script>
+
+<style lang="less" scoped>
+.umo-editor-container {
+  --td-brand-color: var(--umo-primary-color);
+  --td-warning-color: var(--umo-warning-color);
+  --td-error-color: var(--umo-error-color);
+  --td-text-color-primary: var(--umo-text-color);
+  --td-text-color-disabled: var(--umo-text-color-disabled);
+  width: 100%;
+  height: 100%;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+  color: var(--umo-text-color);
+  font-family: var(--umo-font-family);
+  position: relative !important;
+  background-color: var(--umo-color-white);
+  overflow: hidden;
+  .umo-main {
+    flex: 1;
+    background-color: var(--umo-container-background);
+    overflow: hidden;
+  }
+  &.preview-mode {
+    &.laser-pointer {
+      cursor: url("@/assets/images/laser-pointer.svg"), auto;
+    }
+
+    .umo-toolbar {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/components_umo/menus/block/index.vue b/src/components_umo/menus/block/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9ffe28c6847958d19e5858520fb8e04db00190a9
--- /dev/null
+++ b/src/components_umo/menus/block/index.vue
@@ -0,0 +1,390 @@
+<template>
+  <t-dropdown
+    :attach="`${container} .page-container`"
+    placement="bottom-right"
+    overlay-class-name="block-menu-dropdown"
+    trigger="click"
+    :max-height="500"
+    :destroy-on-close="false"
+    :popup-props="{
+      onVisibleChange(visible) {
+        menuVisible = visible
+      },
+    }"
+  >
+    <div
+      class="block-menu-hander"
+      :style="`transform: translate(-38px, ${menuScrollTop}px);`"
+    >
+      <menus-button :menu-active="menuVisible" ico="block-menu" hide-text />
+    </div>
+    <t-dropdown-menu>
+      <t-dropdown-item class="block-menu-group-name" disabled>
+        插入新内容
+      </t-dropdown-item>
+      <t-dropdown-item :divider="options.templates?.length === 0">
+        <menus-button ico="node-add" text="选择节点" :tooltip="false" />
+        <t-dropdown-menu overlay-class-name="block-menu-dropdown">
+          <t-dropdown-item>
+            <menus-button
+              ico="table"
+              text="表格"
+              :tooltip="false"
+              @menu-click="editor?.chain().focus().insertTable().run()"
+            />
+          </t-dropdown-item>
+          <t-dropdown-item>
+            <menus-toolbar-insert-image :huge="false" :tooltip="false" />
+          </t-dropdown-item>
+          <t-dropdown-item>
+            <menus-toolbar-insert-video
+              v-if="!disableItem('video')"
+              :huge="false"
+              :tooltip="false"
+            />
+          </t-dropdown-item>
+          <t-dropdown-item>
+            <menus-toolbar-insert-audio
+              v-if="!disableItem('audio')"
+              :huge="false"
+              :tooltip="false"
+            />
+          </t-dropdown-item>
+          <t-dropdown-item>
+            <menus-toolbar-insert-file
+              v-if="!disableItem('file')"
+              :huge="false"
+              :tooltip="false"
+            />
+          </t-dropdown-item>
+          <t-dropdown-item>
+            <menus-toolbar-insert-code-block
+              v-if="!disableItem('code-block')"
+              :huge="false"
+              shortcutText="Ctrl+Alt+C"
+              :tooltip="false"
+            />
+          </t-dropdown-item>
+          <t-dropdown-item>
+            <menus-button
+              ico="horizontal-line"
+              text="分割线"
+              :tooltip="false"
+              @menu-click="
+                editor
+                  .chain()
+                  .focus()
+                  .setHorizontalRule({ type: 'signle' })
+                  .run()
+              "
+            />
+          </t-dropdown-item>
+          <t-dropdown-item>
+            <menus-toolbar-insert-toc :huge="false" :tooltip="false" />
+          </t-dropdown-item>
+          <t-dropdown-item>
+            <menus-toolbar-insert-text-box :huge="false" :tooltip="false" />
+          </t-dropdown-item>
+          <t-dropdown-item>
+            <menus-toolbar-insert-web-page :huge="false" :tooltip="false" />
+          </t-dropdown-item>
+          <t-dropdown-item>
+            <menus-toolbar-tools-qrcode :huge="false" :tooltip="false" />
+          </t-dropdown-item>
+          <t-dropdown-item>
+            <menus-toolbar-tools-barcode :huge="false" :tooltip="false" />
+          </t-dropdown-item>
+          <t-dropdown-item>
+            <menus-toolbar-tools-signature
+              :huge="false"
+              :tooltip="false"
+              v-if="!disableItem('signature')"
+            />
+          </t-dropdown-item>
+          <!-- <t-dropdown-item>
+            <menus-toolbar-tools-seal
+              v-if="!disableItem('seal')"
+              :huge="false"
+              :tooltip="false"
+            />
+          </t-dropdown-item> -->
+          <t-dropdown-item>
+            <menus-toolbar-tools-diagrams
+              v-if="!disableItem('diagrams')"
+              :huge="false"
+              :tooltip="false"
+            />
+          </t-dropdown-item>
+          <!-- <t-dropdown-item>
+            <menus-toolbar-tools-mermaid
+              v-if="!disableItem('mermaid')"
+              :huge="false"
+              :tooltip="false"
+            />
+          </t-dropdown-item> -->
+        </t-dropdown-menu>
+      </t-dropdown-item>
+      <t-dropdown-item v-if="options.templates.length > 0" divider>
+        <menus-button ico="template" text="插入模板" :tooltip="false" />
+        <t-dropdown-menu overlay-class-name="block-menu-dropdown">
+          <t-dropdown-item
+            v-for="item in options.templates"
+            :key="item.value"
+            :value="item.value"
+            :divider="item.divider"
+            @click="setTemplate(item)"
+          >
+            <div class="dropdown-item-label">{{ item.title }}</div>
+          </t-dropdown-item>
+        </t-dropdown-menu>
+      </t-dropdown-item>
+      <t-dropdown-item class="block-menu-group-name" disabled>
+        切换节点类型
+      </t-dropdown-item>
+      <t-dropdown-item :disabled="editor?.isActive('paragraph')">
+        <menus-button
+          ico="paragraph"
+          text="段落"
+          :tooltip="false"
+          shortcut-text="ctrl+alt+0"
+          @menu-click="toggleNodeType('paragraph')"
+        />
+      </t-dropdown-item>
+      <t-dropdown-item>
+        <menus-button ico="heading" text="标题" :tooltip="false" />
+        <t-dropdown-menu overlay-class-name="block-menu-dropdown">
+          <t-dropdown-item
+            v-for="item in headings"
+            :key="item.level"
+            :disabled="editor?.isActive('heading', { level: item.level })"
+          >
+            <menus-button
+              :tooltip="false"
+              :shortcut-text="`ctrl+alt+${item.level}`"
+              @menu-click="toggleNodeType('heading', { level: item.level })"
+            >
+              <span class="heading">
+                <span class="icon">H{{ item.level }}</span> {{ item.text }}
+              </span>
+            </menus-button>
+          </t-dropdown-item>
+        </t-dropdown-menu>
+      </t-dropdown-item>
+      <t-dropdown-item>
+        <menus-button
+          ico="ordered-list-2"
+          text="有序列表"
+          :tooltip="false"
+          shortcut-text="Ctrl+Shift+7"
+          :menu-active="editor?.isActive('orderedList')"
+          @menu-click="toggleNodeType('orderedList')"
+        />
+      </t-dropdown-item>
+      <t-dropdown-item>
+        <menus-button
+          ico="bullet-list-2"
+          text="无序列表"
+          :tooltip="false"
+          shortcut-text="Ctrl+Shift+8"
+          :menu-active="editor?.isActive('bulletList')"
+          @menu-click="toggleNodeType('bulletList')"
+        />
+      </t-dropdown-item>
+      <t-dropdown-item>
+        <menus-button
+          ico="task-list-2"
+          text="待办事项"
+          :tooltip="false"
+          shortcut-text="Ctrl+Shift+9"
+          :menu-active="editor?.isActive('taskList')"
+          @menu-click="toggleNodeType('taskList')"
+        />
+      </t-dropdown-item>
+      <t-dropdown-item divider>
+        <menus-button
+          ico="quote"
+          text="引用"
+          :tooltip="false"
+          shortcut-text="Ctrl+Shift+B"
+          :menu-active="editor?.isActive('blockquote')"
+          @menu-click="toggleNodeType('blockquote')"
+        />
+      </t-dropdown-item>
+      <t-dropdown-item class="block-menu-group-name" disabled>
+        其他操作
+      </t-dropdown-item>
+      <t-dropdown-item>
+        <menus-button
+          ico="node-delete-2"
+          text="删除节点"
+          :tooltip="false"
+          @menu-click="deleteNode"
+        />
+      </t-dropdown-item>
+    </t-dropdown-menu>
+  </t-dropdown>
+</template>
+
+<script setup>
+const { container, options, editor } = useStore()
+let menuVisible = $ref(false)
+let menuScrollTop = $ref(0)
+const updateMenuPostion = () => {
+  const currentBlock = document.querySelector(`${container} .node-focused`)
+  if (currentBlock === null) return
+  let top = currentBlock.offsetTop
+  top = currentBlock.tagName === 'DIV' ? top - 8 : top - 5
+  if (editor.value.isActive('pageBreak')) top = top - 3
+  if (editor.value.isActive('horizontalRule')) top = top + 3
+  if (editor.value.isActive('table')) top = top + 7
+  menuScrollTop = top
+}
+watch(
+  editor,
+  (val) => {
+    if (val) editor.value.on('selectionUpdate', updateMenuPostion)
+  },
+  { immediate: true },
+)
+
+const headings = $ref([
+  { text: '一级标题', level: 1 },
+  { text: '二级标题', level: 2 },
+  { text: '三级标题', level: 3 },
+  { text: '四级标题', level: 4 },
+  { text: '五级标题', level: 5 },
+  { text: '六级标题', level: 6 },
+])
+
+const disableItem = (name) => {
+  return options.value.toolbar.disableMenuItems.includes(name)
+}
+
+const setTemplate = ({ content }) => {
+  if (!content || !editor.value) return
+  editor.value.commands.insertContent(content)
+}
+
+const toggleNodeType = (type, props = {}) => {
+  editor.value?.chain().focus().run()
+  switch (type) {
+    case 'paragraph':
+      editor.value?.commands.setParagraph()
+      break
+    case 'heading':
+      editor.value?.commands.setHeading(props)
+      break
+    case 'orderedList':
+      editor.value?.commands.toggleOrderedList()
+      break
+    case 'bulletList':
+      editor.value?.commands.toggleBulletList()
+      break
+    case 'taskList':
+      editor.value?.commands.toggleTaskList()
+      break
+    case 'blockquote':
+      editor.value?.commands.toggleBlockquote()
+      break
+  }
+}
+
+const deleteNode = () => {
+  if (editor.value?.isActive('table')) {
+    editor.value?.chain().focus().deleteTable().run()
+    return
+  }
+  editor.value?.chain().focus().selectParentNode().deleteSelection().run()
+}
+</script>
+
+<style lang="less">
+.block-menu-hander {
+  position: absolute;
+  .button-content {
+    color: var(--umo-text-color-light);
+  }
+}
+.block-menu-dropdown {
+  .block-menu-group-name {
+    // padding-top: 8px !important;
+    // line-height: 1;
+    padding-left: 15px !important;
+  }
+  .umo-dropdown__menu,
+  .umo-dropdown__submenu {
+    --td-radius-default: 0;
+    padding: 8px 0 !important;
+    .umo-divider {
+      margin: 4px 0 2px;
+      opacity: 0.5;
+    }
+    .umo-dropdown__item {
+      padding: 2px 0;
+      min-width: 180px !important;
+      .menu-button {
+        background-color: transparent;
+        padding: 0 15px;
+        box-sizing: border-box;
+        justify-content: flex-start;
+        width: 100%;
+        &-wrap {
+          display: block !important;
+        }
+        .umo-button__text {
+          width: 100%;
+        }
+      }
+      .button-content {
+        width: 100%;
+        justify-content: flex-start;
+        .text {
+          color: var(--umo-text-color);
+        }
+        .icon {
+          margin-right: 3px;
+          font-size: 16px;
+          color: #666;
+        }
+        .kbd {
+          flex: 1;
+          text-align: right;
+          color: var(--umo-text-color-light);
+          font-family: Arial, Helvetica, sans-serif;
+          font-size: 9px;
+        }
+        .heading {
+          display: flex;
+          color: var(--umo-text-color);
+          .icon {
+            font-size: 12px;
+            display: inline-block;
+            width: 2em;
+          }
+        }
+      }
+      &--disabled {
+        .button-content {
+          opacity: 0.6;
+        }
+      }
+      &-direction {
+        opacity: 0.4;
+        font-size: 12px !important;
+        margin-right: 8px;
+      }
+      .dropdown-item-label {
+        padding: 1px 15px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+  .umo-dropdown__submenu {
+    margin-left: -2px;
+  }
+}
+</style>
diff --git a/src/components_umo/menus/bubble/code/copy.vue b/src/components_umo/menus/bubble/code/copy.vue
new file mode 100644
index 0000000000000000000000000000000000000000..83c05325606ef2f512a7595075140b4ec606ec75
--- /dev/null
+++ b/src/components_umo/menus/bubble/code/copy.vue
@@ -0,0 +1,16 @@
+<template>
+  <menus-button ico="copy" text="复制代码" @menu-click="copyCode" />
+</template>
+
+<script setup>
+const { editor } = useStore()
+
+const copyCode = () => {
+  const codeBlock = editor.value.commands.getSelectionNode()
+  const { copy } = useClipboard({
+    source: ref(codeBlock.props.node.attrs.code),
+  })
+  copy()
+  useMessage('success', '代码已复制到剪切板')
+}
+</script>
diff --git a/src/components_umo/menus/bubble/code/languages.vue b/src/components_umo/menus/bubble/code/languages.vue
new file mode 100644
index 0000000000000000000000000000000000000000..add775b1f3cd01731e745c05efb22bb03f4a3906
--- /dev/null
+++ b/src/components_umo/menus/bubble/code/languages.vue
@@ -0,0 +1,28 @@
+<template>
+  <menus-button
+    text="语言列表"
+    menu-type="select"
+    style="width: 120px"
+    :select-options="languageOptions"
+    :value="editor?.getAttributes('codeBlock')?.language"
+    placeholder="清选择"
+    filterable
+    @menu-click="setLanguage"
+  >
+  </menus-button>
+</template>
+
+<script setup>
+import { languages } from 'prism-code-editor/prism'
+
+const { editor } = useStore()
+
+const languageOptions = Object.keys(languages).map((item) => {
+  return { label: item, value: item }
+})
+
+const setLanguage = (language) => {
+  const codeBlock = editor.value.commands.getSelectionNode()
+  codeBlock.props.updateAttributes({ language })
+}
+</script>
diff --git a/src/components_umo/menus/bubble/code/line-numbers.vue b/src/components_umo/menus/bubble/code/line-numbers.vue
new file mode 100644
index 0000000000000000000000000000000000000000..066e31c91db714bafac97770bcb3f3c8fd0a2673
--- /dev/null
+++ b/src/components_umo/menus/bubble/code/line-numbers.vue
@@ -0,0 +1,20 @@
+<template>
+  <menus-button
+    ico="code-line-number"
+    text="显示行号"
+    :menu-active="editor?.getAttributes('codeBlock')?.lineNumbers"
+    @menu-click="toggleLineNumbers"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+
+const toggleLineNumbers = () => {
+  const image = editor.value.commands.getSelectionNode()
+  const { lineNumbers } = editor.value?.getAttributes('codeBlock')
+  image.props.updateAttributes({
+    lineNumbers: !lineNumbers,
+  })
+}
+</script>
diff --git a/src/components_umo/menus/bubble/code/themes.vue b/src/components_umo/menus/bubble/code/themes.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1de1b0848f275caa69500320f65f649db7e6e107
--- /dev/null
+++ b/src/components_umo/menus/bubble/code/themes.vue
@@ -0,0 +1,25 @@
+<template>
+  <menus-button
+    text="主题"
+    menu-type="select"
+    style="width: 100px"
+    :select-options="themes"
+    :value="editor?.getAttributes('codeBlock')?.theme"
+    placeholder="清选择"
+    @menu-click="setTheme"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+
+const themes = [
+  { label: '暗色主题', value: 'dark' },
+  { label: '浅色主题', value: 'light' },
+]
+
+const setTheme = (theme) => {
+  const codeBlock = editor.value.commands.getSelectionNode()
+  codeBlock.props.updateAttributes({ theme })
+}
+</script>
diff --git a/src/components_umo/menus/bubble/code/word-wrap.vue b/src/components_umo/menus/bubble/code/word-wrap.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3a242e687346e92f0f86399c2842fa9b149a78e3
--- /dev/null
+++ b/src/components_umo/menus/bubble/code/word-wrap.vue
@@ -0,0 +1,20 @@
+<template>
+  <menus-button
+    ico="code-word-wrap"
+    text="自动换行"
+    :menu-active="editor?.getAttributes('codeBlock')?.wordWrap"
+    @menu-click="toggleWordWrap"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+
+const toggleWordWrap = () => {
+  const image = editor.value.commands.getSelectionNode()
+  const { wordWrap } = editor.value?.getAttributes('codeBlock')
+  image.props.updateAttributes({
+    wordWrap: !wordWrap,
+  })
+}
+</script>
diff --git a/src/components_umo/menus/bubble/file/download.vue b/src/components_umo/menus/bubble/file/download.vue
new file mode 100644
index 0000000000000000000000000000000000000000..94f7e1a0dfc3999336db1abcbe897abc82b4896e
--- /dev/null
+++ b/src/components_umo/menus/bubble/file/download.vue
@@ -0,0 +1,14 @@
+<template>
+  <menus-button ico="download" text="下载文件" @menu-click="downloadFile" />
+</template>
+
+<script setup>
+const { editor } = useStore()
+
+const downloadFile = () => {
+  const a = document.createElement('a')
+  a.href = editor.value?.getAttributes('file').url
+  a.target = '_blank'
+  a.click()
+}
+</script>
diff --git a/src/components_umo/menus/bubble/image/download.vue b/src/components_umo/menus/bubble/image/download.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2d0c6980d8654b9ccd288a75d0f596537d7b4dfd
--- /dev/null
+++ b/src/components_umo/menus/bubble/image/download.vue
@@ -0,0 +1,18 @@
+<template>
+  <menus-button
+    ico="image-download"
+    text="下载图片"
+    @menu-click="downloadImage"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+
+const downloadImage = () => {
+  const a = document.createElement('a')
+  a.href = editor.value?.getAttributes('image').src
+  a.target = '_blank'
+  a.click()
+}
+</script>
diff --git a/src/components_umo/menus/bubble/image/draggable.vue b/src/components_umo/menus/bubble/image/draggable.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cfe1500b0a2d2a7f0284593bbe89beac33e6be1b
--- /dev/null
+++ b/src/components_umo/menus/bubble/image/draggable.vue
@@ -0,0 +1,20 @@
+<template>
+  <menus-button
+    ico="image-draggable"
+    text="图片浮动"
+    :menu-active="editor?.getAttributes('image')?.draggable"
+    @menu-click="toggleDraggable"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+
+const toggleDraggable = () => {
+  const image = editor.value.commands.getSelectionNode()
+  const { draggable } = editor.value?.getAttributes('image')
+  image.props.updateAttributes({
+    draggable: !draggable,
+  })
+}
+</script>
diff --git a/src/components_umo/menus/bubble/image/edit.vue b/src/components_umo/menus/bubble/image/edit.vue
new file mode 100644
index 0000000000000000000000000000000000000000..46cc72083117bb5fc93f6f2d2a799bdbd9023eeb
--- /dev/null
+++ b/src/components_umo/menus/bubble/image/edit.vue
@@ -0,0 +1,16 @@
+<template>
+  <menus-toolbar-tools-qrcode v-if="type === 'qrcode'" :content="content" />
+  <menus-toolbar-tools-barcode v-if="type === 'barcode'" :content="content" />
+  <menus-toolbar-tools-diagrams v-if="type === 'diagrams'" :content="content" />
+  <!-- <menus-toolbar-tools-mermaid v-if="type === 'mermaid'" :content="content" /> -->
+</template>
+
+<script setup>
+const { editor } = useStore()
+const type = computed(() => {
+  return editor.value?.getAttributes('image')?.type
+})
+const content = computed(() => {
+  return editor.value?.getAttributes('image')?.content
+})
+</script>
diff --git a/src/components_umo/menus/bubble/image/flip.vue b/src/components_umo/menus/bubble/image/flip.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e2dccfa1a85e21b087623b0bb60ec6638f8f443f
--- /dev/null
+++ b/src/components_umo/menus/bubble/image/flip.vue
@@ -0,0 +1,34 @@
+<template>
+  <menus-button
+    ico="image-flip"
+    text="水平翻转"
+    :menu-active="editor?.getAttributes('image')?.flipY"
+    @menu-click="setFlip('flipY')"
+  />
+  <menus-button
+    text="垂直翻转"
+    :menu-active="editor?.getAttributes('image')?.flipX"
+    @menu-click="setFlip('flipX')"
+  >
+    <icon name="image-flip" style="transform: rotate(90deg)" />
+  </menus-button>
+</template>
+
+<script setup>
+const { editor } = useStore()
+
+const setFlip = (flip) => {
+  const image = editor.value.commands.getSelectionNode()
+  const { flipX, flipY } = editor.value?.getAttributes('image')
+  if (flip === 'flipX') {
+    image.props.updateAttributes({
+      flipX: !flipX,
+    })
+  }
+  if (flip === 'flipY') {
+    image.props.updateAttributes({
+      flipY: !flipY,
+    })
+  }
+}
+</script>
diff --git a/src/components_umo/menus/bubble/image/preview.vue b/src/components_umo/menus/bubble/image/preview.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fbd2a850ac7310b2ca91c7b00dc5d7d0404306d4
--- /dev/null
+++ b/src/components_umo/menus/bubble/image/preview.vue
@@ -0,0 +1,17 @@
+<template>
+  <menus-button
+    ico="image-preview"
+    text="图片预览"
+    @menu-click="viewerVisible = !viewerVisible"
+  />
+  <t-image-viewer
+    v-model:visible="viewerVisible"
+    :images="[editor?.getAttributes('image').src]"
+  >
+  </t-image-viewer>
+</template>
+
+<script setup>
+const { editor } = useStore()
+const viewerVisible = $ref(false)
+</script>
diff --git a/src/components_umo/menus/bubble/image/proportion.vue b/src/components_umo/menus/bubble/image/proportion.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d42867211e8bf64959784a2a33edfc7dad534f1f
--- /dev/null
+++ b/src/components_umo/menus/bubble/image/proportion.vue
@@ -0,0 +1,20 @@
+<template>
+  <menus-button
+    ico="equal-proportion"
+    text="锁定长宽比"
+    :menu-active="editor?.getAttributes('image')?.equalProportion"
+    @menu-click="toggleEqualProportion"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+
+const toggleEqualProportion = () => {
+  const image = editor.value.commands.getSelectionNode()
+  const { equalProportion } = editor.value?.getAttributes('image')
+  image.props.updateAttributes({
+    equalProportion: !equalProportion,
+  })
+}
+</script>
diff --git a/src/components_umo/menus/bubble/image/remove-background.vue b/src/components_umo/menus/bubble/image/remove-background.vue
new file mode 100644
index 0000000000000000000000000000000000000000..090c1b4c5872493d3f3fcba1510b7bac17c6ec56
--- /dev/null
+++ b/src/components_umo/menus/bubble/image/remove-background.vue
@@ -0,0 +1,48 @@
+<template>
+  <menus-button
+    :text="converting ? '正在去除图片背景...' : '去除图片背景'"
+    :disabled="converting"
+    @menu-click="removeBackground"
+  >
+    <icon v-if="!converting" name="image-remove-background" />
+    <icon v-else class="loading" name="loading" />
+  </menus-button>
+</template>
+
+<script setup>
+import imglyRemoveBackground from '@imgly/background-removal'
+import generateId from '@/utils/generate-id'
+
+const { options, editor } = useStore()
+
+let converting = $ref(false)
+const removeBackground = async () => {
+  const image = editor.value.commands.getSelectionNode()
+  const { src } = editor.value?.getAttributes('image')
+  converting = true
+  const blob = await imglyRemoveBackground(src, {
+    publicPath: `${options.value.cdnUrl}/libs/imgly/background-removal-data/`,
+  })
+  const file = new File([blob], `${generateId(10)}.png`, { type: 'image/png' })
+  image.props.updateAttributes({
+    src: URL.createObjectURL(blob),
+    uploaded: false,
+    file,
+  })
+  converting = false
+}
+</script>
+
+<style lang="less" scoped>
+.loading {
+  animation: turn 1s linear infinite;
+}
+@keyframes turn {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/src/components_umo/menus/bubble/image/reset.vue b/src/components_umo/menus/bubble/image/reset.vue
new file mode 100644
index 0000000000000000000000000000000000000000..94ff6e491af54e31135ebbf24c0a9f1374967c44
--- /dev/null
+++ b/src/components_umo/menus/bubble/image/reset.vue
@@ -0,0 +1,22 @@
+<template>
+  <menus-button
+    ico="image-reset"
+    text="重置图片位置"
+    @menu-click="resetPosition"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+
+const resetPosition = () => {
+  const image = editor.value.commands.getSelectionNode()
+  image.props.updateAttributes({
+    top: 0,
+    left: 0,
+    angle: 0,
+    flipX: false,
+    flipy: false,
+  })
+}
+</script>
diff --git a/src/components_umo/menus/bubble/image/rotate.vue b/src/components_umo/menus/bubble/image/rotate.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9b8f1c90fc0a30b5b3a1edce75ed83945227b225
--- /dev/null
+++ b/src/components_umo/menus/bubble/image/rotate.vue
@@ -0,0 +1,22 @@
+<template>
+  <menus-button
+    ico="image-rotate"
+    text="逆时针旋转90度"
+    @menu-click="setRotate(-90)"
+  />
+  <menus-button text="顺时针旋转90度" @menu-click="setRotate(90)">
+    <icon name="image-rotate" style="transform: rotateY(180deg)" />
+  </menus-button>
+</template>
+
+<script setup>
+const { editor } = useStore()
+
+const setRotate = (rotate) => {
+  const image = editor.value.commands.getSelectionNode()
+  const { angle } = editor.value?.getAttributes('image')
+  image.props.updateAttributes({
+    angle: angle ? angle + rotate : rotate,
+  })
+}
+</script>
diff --git a/src/components_umo/menus/bubble/index.vue b/src/components_umo/menus/bubble/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..53ffe23df09f73c3210c7bca918308c3acc9007a
--- /dev/null
+++ b/src/components_umo/menus/bubble/index.vue
@@ -0,0 +1,86 @@
+<template>
+  <template v-if="editor?.isActive('toc') || editor?.isActive('pageBreak') || editor?.isActive('horizontalRule') || editor?.getAttributes('image').error">
+    <!-- <menus-bubble-node-delete /> -->
+  </template>
+  <template v-else-if="editor?.isActive('image') && !editor?.getAttributes('image').error">
+    <menus-toolbar-base-align-left />
+    <menus-toolbar-base-align-center />
+    <menus-toolbar-base-align-right />
+    <div class="divider"></div>
+    <menus-bubble-image-flip />
+    <menus-bubble-image-proportion />
+    <menus-bubble-image-draggable />
+    <menus-bubble-image-reset />
+    <div class="divider"></div>
+    <!-- <menus-bubble-image-remove-background v-if="editor?.getAttributes('image')?.type === 'image' || ['image/png', 'image/jpeg'].includes(editor?.getAttributes('image')?.type)" /> -->
+    <menus-bubble-image-preview v-if="editor?.getAttributes('image')?.type === 'image'" />
+    <menus-bubble-image-download />
+    <div class="divider"></div>
+    <menus-bubble-image-edit />
+    <menus-bubble-node-delete />
+  </template>
+  <template v-else-if="editor?.isActive('video') || editor?.isActive('audio') || editor?.isActive('file') || editor?.isActive('iframe')">
+    <menus-toolbar-base-align-left />
+    <menus-toolbar-base-align-center />
+    <menus-toolbar-base-align-right />
+    <div class="divider"></div>
+    <menus-bubble-file-download v-if="editor?.isActive('file') || editor?.isActive('video') || editor?.isActive('audio')" />
+    <menus-bubble-node-delete />
+  </template>
+  <template v-else-if="editor?.isActive('table')">
+    <menus-toolbar-table-cells-align />
+    <menus-toolbar-table-cells-background />
+    <!-- <menus-toolbar-table-border-color  /> -->
+    <div class="divider"></div>
+    <menus-toolbar-table-add-row-before />
+    <menus-toolbar-table-add-row-after />
+    <menus-toolbar-table-add-column-before />
+    <menus-toolbar-table-add-column-after />
+    <div class="divider"></div>
+    <menus-toolbar-table-delete-row />
+    <menus-toolbar-table-delete-column />
+    <div class="divider"></div>
+    <menus-toolbar-table-merge-cells />
+    <menus-toolbar-table-split-cell />
+    <div class="divider"></div>
+    <menus-bubble-node-delete />
+  </template>
+  <template v-else-if="editor?.isActive('codeBlock')">
+    <!-- <menus-bubble-code-languages /> -->
+    <!-- <menus-bubble-code-themes /> -->
+    <div class="divider"></div>
+    <menus-bubble-code-line-numbers />
+    <menus-bubble-code-word-wrap />
+    <div class="divider"></div>
+    <menus-bubble-code-copy />
+    <menus-bubble-node-delete />
+  </template>
+  <template v-else>
+    <menus-toolbar-base-font-size :select="false" />
+    <div class="divider"></div>
+    <menus-toolbar-base-bold />
+    <menus-toolbar-base-italic />
+    <menus-toolbar-base-underline />
+    <menus-toolbar-base-strike />
+    <div class="divider"></div>
+    <menus-toolbar-base-align-dropdown />
+    <div class="divider"></div>
+    <menus-toolbar-base-color />
+    <menus-toolbar-base-background-color />
+    <menus-toolbar-base-highlight />
+  </template>
+</template>
+
+<script setup>
+const { editor } = useStore();
+console.log(editor,'editoreditor11')
+</script>
+
+<style lang="less" scoped>
+.divider {
+  width: 1;
+  border-right: solid 1px var(--umo-border-color-light);
+  height: 16px;
+  margin: 0 10px 0 5px;
+}
+</style>
diff --git a/src/components_umo/menus/bubble/node-delete.vue b/src/components_umo/menus/bubble/node-delete.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a5180f56d824c37b3e57cf8751f4db07a014df91
--- /dev/null
+++ b/src/components_umo/menus/bubble/node-delete.vue
@@ -0,0 +1,12 @@
+<template>
+  <menus-button
+    ico="node-delete"
+    text="删除"
+    shortcut="Backspace"
+    @menu-click="editor?.chain().focus().deleteSelectionNode().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/button.vue b/src/components_umo/menus/button.vue
new file mode 100644
index 0000000000000000000000000000000000000000..702de00b424680cc471e7bbb9600b2ae23ebb970
--- /dev/null
+++ b/src/components_umo/menus/button.vue
@@ -0,0 +1,454 @@
+<template>
+  <t-tooltip :content="getTooltipContent" :visible="tooltipVisible && !tooltipForceHide" theme="light" placement="top" :attach="container" :show-arrow="false" destroy-on-close>
+    <div class="menu-button-wrap" @click="tooltipVisible = false" @mouseover="tooltipVisible = true" @mouseleave="tooltipVisible = false">
+      <template v-if="menuType === 'button'">
+        <t-button
+          class="menu-button"
+          :class="{
+            huge: huge && $toolbar.mode === 'ribbon',
+            'show-text': !hideText,
+            active: menuActive && editor?.isEditable
+          }"
+          shape="square"
+          variant="text"
+          size="small"
+          :disabled="disabled || !editor?.isEditable"
+          @click="menuClick"
+          v-bind="attrs"
+        >
+          <div class="button-content">
+            <slot />
+            <icon class="icon" v-if="ico" :name="ico" />
+            <p class="text">{{ text }}</p>
+            <kbd class="kbd" v-if="shortcutText">
+              {{ getShortcut(shortcutText) }}
+            </kbd>
+          </div>
+        </t-button>
+      </template>
+      <template v-else-if="menuType === 'dropdown'">
+        <template v-if="popupHandle === 'arrow'">
+          <t-button
+            class="menu-button has-arrow"
+            :class="{
+              huge: huge && $toolbar.mode === 'ribbon',
+              'show-text': !hideText,
+              active: tooltipForceHide
+            }"
+            variant="text"
+            size="small"
+            v-bind="attrs"
+            :disabled="disabled || !editor?.isEditable"
+          >
+            <div class="button-content" @click="menuClick">
+              <slot />
+              <icon class="icon" v-if="ico" :name="ico" />
+              <p class="text">{{ text }}</p>
+              <kbd class="kbd" v-if="shortcutText">
+                {{ getShortcut(shortcutText) }}
+              </kbd>
+            </div>
+            <t-dropdown
+              v-bind="attrs"
+              trigger="click"
+              size="small"
+              :options="selectOptions"
+              :popup-props="{
+                overlayClassName: attrs['overlay-class-name'],
+                popperOptions: {
+                  modifiers: [{ name: 'offset', options: { offset: [-22, 0] } }]
+                },
+                onVisibleChange: popupVisileChange,
+                destroyOnClose: true,
+                attach: container
+              }"
+              @click="attrs.onChange"
+            >
+              <span class="icon-arrow handle">
+                <icon name="arrow-down" />
+              </span>
+              <slot v-if="!selectOptions" name="dropmenu" />
+            </t-dropdown>
+          </t-button>
+        </template>
+        <template v-else>
+          <t-dropdown
+            v-bind="attrs"
+            trigger="click"
+            size="small"
+            :options="selectOptions"
+            :popup-props="{
+              overlayClassName: attrs['overlay-class-name'],
+              onVisibleChange: popupVisileChange,
+              destroyOnClose: true,
+              attach: container
+            }"
+            @click="attrs.onChange"
+          >
+            <t-button
+              class="menu-button has-arrow"
+              :class="{
+                huge: huge && $toolbar.mode === 'ribbon',
+                'show-text': !hideText,
+                active: tooltipForceHide
+              }"
+              variant="text"
+              size="small"
+              v-bind="attrs"
+              :disabled="disabled || !editor?.isEditable"
+            >
+              <div class="button-content" @click="menuClick">
+                <slot />
+                <icon class="icon" v-if="ico" :name="ico" />
+                <p class="text">{{ text }}</p>
+                <kbd class="kbd" v-if="shortcutText">{{ getShortcut(shortcutText) }}</kbd>
+                <span v-if="$toolbar.mode === 'ribbon'" class="icon-arrow">
+                  <icon name="arrow-down" />
+                </span>
+              </div>
+              <span v-if="$toolbar.mode === 'classic'" class="icon-arrow">
+                <icon name="arrow-down" />
+              </span>
+            </t-button>
+            <slot v-if="!selectOptions" name="dropmenu" />
+          </t-dropdown>
+        </template>
+      </template>
+      <template v-else-if="menuType === 'select'">
+        <t-select
+          size="small"
+          placement="bottom-left"
+          :on-popup-visible-change="popupVisileChange"
+          :value="value"
+          :popup-props="{
+            destroyOnClose: true,
+            attach: container
+          }"
+          v-bind="attrs"
+          :options="selectOptions"
+          :disabled="disabled || !editor?.isEditable"
+          @change="menuClick"
+        >
+          <slot />
+        </t-select>
+      </template>
+      <template v-else-if="menuType === 'popup'">
+        <template v-if="popupHandle === 'arrow'">
+          <t-button
+            class="menu-button has-arrow"
+            :class="{
+              'show-text': !hideText,
+              active: popupVisible
+            }"
+            variant="text"
+            size="small"
+            v-bind="attrs"
+            :disabled="disabled || !editor?.isEditable"
+          >
+            <div class="button-content" @click="menuClick">
+              <slot />
+              <icon class="icon" v-if="ico" :name="ico" />
+              <p class="text">{{ text }}</p>
+              <kbd class="kbd" v-if="shortcutText">
+                {{ getShortcut(shortcutText) }}
+              </kbd>
+            </div>
+            <t-popup
+              :attach="container"
+              trigger="click"
+              placement="bottom-left"
+              v-bind="attrs"
+              :visible="popupVisible"
+              :popper-options="{
+                modifiers: [{ name: 'offset', options: { offset: [-22, 0] } }]
+              }"
+            >
+              <span v-if="$toolbar.mode === 'ribbon'" ref="popupHandleRef" class="icon-arrow handle" @click="togglePopup()">
+                <icon name="arrow-down" />
+              </span>
+              <template #content>
+                <div class="umo-popup-content" ref="popupContentRef">
+                  <slot name="content" />
+                </div>
+              </template>
+              <span v-if="$toolbar.mode === 'classic'" ref="popupHandleRef" class="icon-arrow handle" @click="togglePopup()">
+                <icon name="arrow-down" />
+              </span>
+            </t-popup>
+          </t-button>
+        </template>
+        <template v-else>
+          <t-popup :attach="container" trigger="click" placement="bottom-left" :visible="popupVisible">
+            <t-button
+              ref="popupHandleRef"
+              class="menu-button has-arrow"
+              :class="{
+                huge: huge && $toolbar.mode === 'ribbon',
+                'show-text': !hideText,
+                active: popupVisible
+              }"
+              variant="text"
+              size="small"
+              v-bind="attrs"
+              :disabled="disabled || !editor?.isEditable"
+              @click="togglePopup()"
+            >
+              <div class="button-content">
+                <slot />
+                <icon class="icon" v-if="ico" :name="ico" />
+                <p class="text">{{ text }}</p>
+                <kbd class="kbd" v-if="shortcutText">{{ getShortcut(shortcutText) }}</kbd>
+                <span v-if="$toolbar.mode === 'ribbon'" class="icon-arrow">
+                  <icon name="arrow-down" />
+                </span>
+              </div>
+              <span v-if="$toolbar.mode === 'classic'" class="icon-arrow">
+                <icon name="arrow-down" />
+              </span>
+            </t-button>
+            <template #content>
+              <div class="umo-popup-content" ref="popupContentRef">
+                <slot name="content" />
+              </div>
+            </template>
+          </t-popup>
+        </template>
+      </template>
+      <template v-else>
+        <slot />
+      </template>
+    </div>
+  </t-tooltip>
+</template>
+
+<script setup>
+import getShortcut from "@/utils/shortcut";
+
+const props = defineProps({
+  value: {
+    type: [String, Number],
+    default: ""
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  // 按钮图标
+  ico: {
+    type: String,
+    default: ""
+  },
+  // 按钮文字
+  text: {
+    type: String,
+    default: ""
+  },
+  hideText: {
+    type: Boolean,
+    default: false
+  },
+  // 提示
+  tooltip: {
+    type: [String, Boolean],
+    default: undefined
+  },
+  // 快捷键
+  shortcut: {
+    type: String,
+    default: undefined
+  },
+  shortcutText: {
+    type: String,
+    default: undefined
+  },
+  // 菜单类型
+  menuType: {
+    type: String,
+    default: "button"
+  },
+  huge: {
+    type: Boolean,
+    default: false
+  },
+  // 菜单激活状态
+  menuActive: {
+    type: Boolean,
+    default: false
+  },
+  // Dropdown,Select 相关
+  selectOptions: {
+    type: Array
+  },
+  // Popup 相关
+  popupVisible: {
+    type: Boolean,
+    default: false
+  },
+  popupHandle: {
+    type: String
+  }
+});
+const emits = defineEmits(["toggle-popup"]);
+
+const attrs = useAttrs();
+const { container, editor } = useStore();
+const $toolbar = useState("toolbar");
+const menuClick = (...args) => {
+  if (attrs.onMenuClickThrough) {
+    attrs.onMenuClickThrough(...args);
+  } else if (attrs.onMenuClick) {
+    attrs.onMenuClick(...args);
+  }
+};
+
+let tooltipVisible = $ref(false);
+let tooltipForceHide = $ref(false);
+const popupVisileChange = (visible) => {
+  // 隐藏 Tooltip，适用于 select、dropdown、popup 等子组件展开时，隐藏 Tooltip
+  tooltipForceHide = visible;
+};
+const getTooltipContent = () => {
+  if (props.tooltip === false) {
+    return "";
+  }
+  if (props.huge && props.tooltip) {
+    return `${props.tooltip}${props.shortcut ? ` (${getShortcut(props.shortcut)})` : ""}`;
+  }
+  if (props.text) {
+    return `${props.tooltip || props.text}${props.shortcut ? ` (${getShortcut(props.shortcut)})` : ""}`;
+  }
+  return "";
+};
+watch(
+  () => props.popupVisible,
+  (val) => {
+    tooltipForceHide = val;
+  }
+);
+
+// Popup
+const popupHandleRef = ref(null);
+const popupContentRef = ref(null);
+const togglePopup = (visible) => {
+  emits("toggle-popup", visible);
+};
+onClickOutside(
+  popupContentRef,
+  () => {
+    emits("toggle-popup", false);
+  },
+  {
+    ignore: [popupHandleRef, ".umo-popup"]
+  }
+);
+</script>
+
+<style lang="less" scoped>
+.menu-button {
+  --td-comp-paddingLR-s: 5px;
+  --td-radius-default: var(--umo-radius);
+  border: none;
+  &.show-text {
+    width: auto;
+    padding-left: var(--td-comp-paddingLR-s);
+    padding-right: var(--td-comp-paddingLR-s);
+    .button-content .text {
+      display: block !important;
+      margin-left: 3px;
+    }
+  }
+  &[disabled] {
+    .icon {
+      --umo-primary-color: var(--umo-text-color-disabled);
+      color: var(--umo-text-color-disabled) !important;
+    }
+    .text {
+      color: var(--umo-text-color-disabled) !important;
+    }
+  }
+  &-wrap {
+    display: inline-flex;
+    &:not(:last-child) {
+      margin-right: 5px;
+    }
+  }
+  &.active {
+    background-color: var(--umo-button-hover-background);
+    .icon-arrow.handle {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+  }
+  .button-content {
+    display: flex;
+    align-items: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .icon,
+    :deep(.icon) {
+      font-size: 16px;
+    }
+    .text {
+      display: none;
+    }
+  }
+  .icon-arrow {
+    display: flex;
+    border-top-right-radius: var(--td-radius-default);
+    border-bottom-right-radius: var(--td-radius-default);
+    width: 12px;
+    height: 26px;
+    align-items: center;
+    justify-content: center;
+    margin-right: -3px;
+    .icon {
+      font-size: 10px;
+      color: var(--umo-text-color-light);
+    }
+    &.handle {
+      margin: 0 -4px 0 2px;
+      &:hover {
+        background-color: var(--td-bg-color-container-active);
+      }
+    }
+  }
+  &.huge {
+    padding: 0 3px;
+    width: auto;
+    padding: 0 var(--td-comp-paddingLR-s);
+    height: 56px;
+    margin-bottom: 0;
+    flex-direction: column;
+    .button-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      min-width: 32px;
+      .icon {
+        display: block;
+        font-size: 24px;
+        margin-top: 3px;
+      }
+      .text {
+        display: block;
+        font-size: 12px;
+        color: var(--umo-text-color);
+      }
+      .icon-arrow {
+        position: absolute;
+        left: calc(50% + 12px);
+        top: 2px;
+      }
+    }
+    &.has-arrow {
+      .button-content {
+        min-width: 40px;
+      }
+    }
+  }
+}
+:global(.umo-popup-content) {
+  padding: var(--umo-popup-content-padding);
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/base/align-center.vue b/src/components_umo/menus/toolbar/base/align-center.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c76d36509cf3fdbcf7e5b2ae1b0a995f83ac8dd0
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/align-center.vue
@@ -0,0 +1,30 @@
+<template>
+  <menus-button
+    text="居中对齐"
+    ico="align-center"
+    shortcut="Ctrl+Shift+E"
+    hide-text
+    :menu-active="
+      editor?.isActive({ textAlign: 'center' }) ||
+      editor?.isActive({ nodeAlign: 'center' })
+    "
+    :disabled="
+      !editor?.can().chain().focus().setTextAlign('center').run() &&
+      !editor?.can().chain().focus().setNodeAlign('center').run()
+    "
+    @menu-click="setAlignCenter"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+
+const setAlignCenter = () => {
+  if (editor.value?.can().chain().focus().setTextAlign('center').run()) {
+    editor.value?.chain().focus().setTextAlign('center').run()
+  }
+  if (editor.value?.can().chain().focus().setNodeAlign('center').run()) {
+    editor.value?.chain().focus().setNodeAlign('center').run()
+  }
+}
+</script>
diff --git a/src/components_umo/menus/toolbar/base/align-distributed.vue b/src/components_umo/menus/toolbar/base/align-distributed.vue
new file mode 100644
index 0000000000000000000000000000000000000000..78cf7e75a2fadee0f59b32c002a034207b06232d
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/align-distributed.vue
@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    ico="align-distributed"
+    text="分散对齐"
+    shortcut="Ctrl+Shift+D"
+    hide-text
+    :menu-active="editor?.isActive({ textAlign: 'distributed' })"
+    :disabled="!editor?.can().chain().focus().setTextAlign('distributed').run()"
+    @menu-click="editor?.chain().focus().setTextAlign('distributed').run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/base/align-dropdown.vue b/src/components_umo/menus/toolbar/base/align-dropdown.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e5384ecef11476cecba4b35b9a3d1e25b1668007
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/align-dropdown.vue
@@ -0,0 +1,55 @@
+<template>
+  <menus-button
+    :ico="`align-${textAlign}`"
+    text="文字对齐方式"
+    menu-type="popup"
+    hide-text
+    :disabled="!editor?.can().chain().focus().setTextAlign('center').run()"
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <div class="text-align-group">
+        <menus-toolbar-base-align-left />
+        <menus-toolbar-base-align-center />
+        <menus-toolbar-base-align-right />
+        <menus-toolbar-base-align-justify />
+        <menus-toolbar-base-align-distributed />
+      </div>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+let { popupVisible, togglePopup } = usePopup()
+
+const { editor } = useStore()
+
+const textAlign = computed(() => {
+  if (!editor.value) {
+    return 'left'
+  }
+  if (editor.value.isActive({ textAlign: 'justify' })) {
+    return 'left'
+  }
+  if (editor.value.isActive({ textAlign: 'center' })) {
+    return 'center'
+  }
+  if (editor.value.isActive({ textAlign: 'right' })) {
+    return 'right'
+  }
+  if (editor.value.isActive({ textAlign: 'justify' })) {
+    return 'justify'
+  }
+  return 'left'
+})
+</script>
+
+<style lang="less" scoped>
+.text-align {
+  &-group {
+    padding-top: 2px;
+    margin: -5px 0;
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/base/align-justify.vue b/src/components_umo/menus/toolbar/base/align-justify.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c9523338e1bd3ba3c750f441d8530a57576912e9
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/align-justify.vue
@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    ico="align-justify"
+    text="两端对齐"
+    shortcut="Ctrl+Shift+J"
+    hide-text
+    :menu-active="editor?.isActive({ textAlign: 'justify' })"
+    :disabled="!editor?.can().chain().focus().setTextAlign('justify').run()"
+    @menu-click="editor?.chain().focus().setTextAlign('justify').run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/base/align-left.vue b/src/components_umo/menus/toolbar/base/align-left.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5e4ff3aa36bd6048053f2d1c2ad864aaba655cab
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/align-left.vue
@@ -0,0 +1,29 @@
+<template>
+  <menus-button
+    ico="align-left"
+    text="左对齐"
+    shortcut="Ctrl+Shift+L"
+    hide-text
+    :menu-active="
+      editor?.isActive({ textAlign: 'left' }) ||
+      editor?.isActive({ nodeAlign: 'flex-start' })
+    "
+    :disabled="
+      !editor?.can().chain().focus().setTextAlign('left').run() &&
+      !editor?.can().chain().focus().setNodeAlign('left').run()
+    "
+    @menu-click="setAlignLeft"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+const setAlignLeft = () => {
+  if (editor.value?.can().chain().focus().setTextAlign('left').run()) {
+    editor.value?.chain().focus().setTextAlign('left').run()
+  }
+  if (editor.value?.can().chain().focus().setNodeAlign('flex-start').run()) {
+    editor.value?.chain().focus().setNodeAlign('flex-start').run()
+  }
+}
+</script>
diff --git a/src/components_umo/menus/toolbar/base/align-right.vue b/src/components_umo/menus/toolbar/base/align-right.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b8607681e8bb7afbc2ca141d178a74889dedb99c
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/align-right.vue
@@ -0,0 +1,30 @@
+<template>
+  <menus-button
+    ico="align-right"
+    text="右对齐"
+    shortcut="Ctrl+Shift+R"
+    hide-text
+    :menu-active="
+      editor?.isActive({ textAlign: 'right' }) ||
+      editor?.isActive({ nodeAlign: 'flex-end' })
+    "
+    :disabled="
+      !editor?.can().chain().focus().setTextAlign('right').run() &&
+      !editor?.can().chain().focus().setNodeAlign('flex-end').run()
+    "
+    @menu-click="setAlignRight"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+
+const setAlignRight = () => {
+  if (editor.value?.can().chain().focus().setTextAlign('right').run()) {
+    editor.value?.chain().focus().setTextAlign('right').run()
+  }
+  if (editor.value?.can().chain().focus().setNodeAlign('flex-end').run()) {
+    editor.value?.chain().focus().setNodeAlign('flex-end').run()
+  }
+}
+</script>
diff --git a/src/components_umo/menus/toolbar/base/background-color.vue b/src/components_umo/menus/toolbar/base/background-color.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dd124eefab5609bd5c082b8fd448810e06ff2fa3
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/background-color.vue
@@ -0,0 +1,66 @@
+<template>
+  <menus-button
+    :text="text"
+    menu-type="popup"
+    popup-handle="arrow"
+    hide-text
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <icon
+      name="background-color"
+      class="icon-background-color"
+      :style="{
+        background: editor?.getAttributes('highlight')?.color || currentColor,
+      }"
+    />
+    <template #content>
+      <color-picker :default-color="defaultColor" @change="colorChange" />
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+const props = defineProps({
+  text: {
+    type: String,
+    default: '字体背景颜色',
+  },
+  modeless: {
+    type: Boolean,
+    default: false,
+  },
+  defaultColor: {
+    type: String,
+    default: '',
+  },
+})
+const emits = defineEmits(['change'])
+
+let { popupVisible, togglePopup } = usePopup()
+const { editor } = useStore()
+
+let currentColor = $ref()
+
+const colorChange = (color) => {
+  currentColor = color
+  popupVisible.value = false
+
+  if (props.modeless) {
+    emits('change', currentColor)
+    return
+  }
+
+  if (color !== '') {
+    editor.value?.chain().focus().setHighlight({ color }).run()
+  } else {
+    editor.value?.chain().focus().unsetHighlight().run()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.icon-background-color {
+  border-radius: 2px;
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/base/bold.vue b/src/components_umo/menus/toolbar/base/bold.vue
new file mode 100644
index 0000000000000000000000000000000000000000..215d6b0c4ddf9e96137410697483e6358241fdda
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/bold.vue
@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    ico="bold"
+    text="加粗"
+    shortcut="Ctrl+B"
+    hide-text
+    :menu-active="editor?.isActive('bold')"
+    :disabled="!editor?.can().chain().focus().toggleBold().run()"
+    @menu-click="editor?.chain().focus().toggleBold().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/base/bullet-list.vue b/src/components_umo/menus/toolbar/base/bullet-list.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9e3ae137a73eefb62331d0d2bcdedc751af4d5a9
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/bullet-list.vue
@@ -0,0 +1,104 @@
+<template>
+  <menus-button
+    ico="bullet-list"
+    text="项目符号"
+    shortcut="Ctrl+Shift+8"
+    menu-type="popup"
+    popup-handle="arrow"
+    hide-text
+    :menu-active="editor?.isActive('bulletList')"
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+    @menu-click="toggleBulletList(options[0].value)"
+  >
+    <template #content>
+      <div class="bullet-list-group">
+        <tooltip
+          v-for="item in options"
+          :key="item.value"
+          :content="item.label"
+        >
+          <div
+            class="bullet-list-item"
+            :class="{ active: listType == item.value }"
+            @click="toggleBulletList(item.value)"
+          >
+            <icon
+              class="icon-bullet-list"
+              :name="`bullet-list-${item.value}`"
+            />
+          </div>
+        </tooltip>
+      </div>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+let { popupVisible, togglePopup } = usePopup()
+const { editor } = useStore()
+
+const options = [
+  { label: '圆点', value: 'disc' },
+  { label: '空心圆点', value: 'circle' },
+  { label: '方块', value: 'square' },
+]
+
+let listType = $ref('')
+watch(
+  () => popupVisible.value,
+  (val) => {
+    if (val && editor.value) {
+      const { listStyleType } = editor.value.getAttributes('bulletList')
+      listType = listStyleType?.listStyleType || listStyleType || ''
+    }
+  },
+)
+const toggleBulletList = (listStyleType) => {
+  const chain = editor.value?.chain().focus()
+  if (!editor.value?.isActive('bulletList')) {
+    chain
+      .toggleBulletList()
+      .updateAttributes('bulletList', { listStyleType })
+      .run()
+  }
+  // 切换列表类型
+  else if (
+    editor.value.getAttributes('bulletList').listStyleType !== listStyleType
+  ) {
+    chain.updateAttributes('bulletList', { listStyleType }).run()
+  }
+  // 关闭列表类型
+  else {
+    chain.toggleBulletList().run()
+  }
+  listType = listStyleType
+  popupVisible.value = false
+}
+</script>
+
+<style lang="less" scoped>
+.bullet-list-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  .bullet-list-item {
+    cursor: pointer;
+    padding: 5px;
+    border: solid 1px var(--umo-border-color);
+    box-sizing: border-box;
+    &:last-child {
+      margin-right: 0;
+    }
+    &:hover {
+      background-color: var(--umo-button-hover-background);
+    }
+    &.active {
+      border-color: var(--umo-primary-color);
+    }
+  }
+  .icon-bullet-list {
+    font-size: 44px;
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/base/clear-format.vue b/src/components_umo/menus/toolbar/base/clear-format.vue
new file mode 100644
index 0000000000000000000000000000000000000000..157f7f473fccaf76f4d33b463999e5d48f9b1da8
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/clear-format.vue
@@ -0,0 +1,12 @@
+<template>
+  <menus-button
+    ico="clear-format"
+    text="清除文本格式"
+    hide-text
+    @menu-click="editor?.chain().focus().unsetAllMarks().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/base/code.vue b/src/components_umo/menus/toolbar/base/code.vue
new file mode 100644
index 0000000000000000000000000000000000000000..998399ba456fb980b10d4127105edfcc95c9cbd1
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/code.vue
@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    ico="code"
+    text="代码"
+    shortcut="Ctrl+E"
+    hide-text
+    :menu-active="editor?.isActive('code')"
+    :disabled="!editor?.can().chain().focus().toggleCode().run()"
+    @menu-click="editor?.chain().focus().toggleCode().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/base/color.vue b/src/components_umo/menus/toolbar/base/color.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ef516380c90c588e16cdbe3e08a67ca09bd5f295
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/color.vue
@@ -0,0 +1,69 @@
+<template>
+  <menus-button
+    ico="color"
+    :text="text"
+    menu-type="popup"
+    popup-handle="arrow"
+    hide-text
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+    @menu-click="colorChange(currentColor)"
+  >
+    <div
+      class="current-color"
+      :style="{
+        background: editor?.getAttributes('textStyle')?.color || currentColor,
+      }"
+    ></div>
+    <template #content>
+      <color-picker :default-color="defaultColor" @change="colorChange" />
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+const props = defineProps({
+  text: {
+    type: String,
+    default: '字体颜色',
+  },
+  modeless: {
+    type: Boolean,
+    default: false,
+  },
+  defaultColor: {
+    type: String,
+    default: '#000',
+  },
+})
+const emits = defineEmits(['change'])
+
+let { popupVisible, togglePopup } = usePopup()
+const { editor } = useStore()
+
+let currentColor = $ref()
+const colorChange = (color) => {
+  currentColor = color
+  popupVisible.value = false
+
+  if (props.modeless) {
+    emits('change', currentColor)
+    return
+  }
+
+  if (color !== '') {
+    editor.value?.chain().focus().setColor(color).run()
+  } else {
+    editor.value?.chain().focus().unsetColor().run()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.current-color {
+  width: 12px;
+  height: 2px;
+  position: absolute;
+  margin: 0 0 -22px 2px;
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/base/font-family.vue b/src/components_umo/menus/toolbar/base/font-family.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1368ece9c038e3df556ba6baa522c8e0c18a929b
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/font-family.vue
@@ -0,0 +1,156 @@
+<template>
+  <menus-button
+    text="选择字体"
+    menu-type="select"
+    hide-text
+    :value="editor?.getAttributes('textStyle').fontFamily || null"
+    :style="{ width: $toolbar.mode !== 'classic' ? '144px' : '90px' }"
+    placeholder="字体"
+    filterable
+    @menu-click="setFontFamily"
+  >
+    <t-option-group
+      v-for="(group, index) in allFonts"
+      :key="index"
+      :label="group.label"
+      :divider="false"
+    >
+      <t-option
+        class="font-family-item"
+        v-for="item in group.children"
+        :value="item.value"
+        :key="item.value"
+        :label="item.label"
+      >
+        <span :style="{ fontFamily: item.value }">{{ item.label }}</span>
+        <span
+          v-if="!fontDetect(item.value)"
+          class="not-support"
+          title="可能无法正常显示该字体，可能是本机未安装该字体"
+          >!</span
+        >
+      </t-option>
+    </t-option-group>
+  </menus-button>
+</template>
+
+<script setup>
+const { options, editor } = useStore()
+const $toolbar = useState('toolbar')
+const $recent = useState('recent')
+
+let usedFonts = $ref([])
+// https://www.cnblogs.com/gaidalou/p/8479452.html
+const fontDetect = (font) => {
+  if (!font) return true
+  if (typeof font !== 'string') return false
+
+  const baseFont = 'fontname'
+  const testChar = 'text'
+  const canvasWidth = 100
+  const canvasHeight = 100
+
+  const canvas = document.createElement('canvas')
+  const context = canvas.getContext('2d', { willReadFrequently: true })
+
+  canvas.width = canvasWidth
+  canvas.height = canvasHeight
+
+  context.textAlign = 'center'
+  context.fillStyle = 'black'
+  context.textBaseline = 'middle'
+
+  const getImageDataWithFont = (currentFont) => {
+    context.clearRect(0, 0, canvasWidth, canvasHeight)
+    context.font = `${canvasHeight}px ${currentFont}, ${baseFont}`
+    context.fillText(testChar, canvasWidth / 2, canvasHeight / 2)
+    const { data } = context.getImageData(0, 0, canvasWidth, canvasHeight)
+
+    return Array.from(data).filter((pixel) => pixel !== 0)
+  }
+
+  // 返回结果，如果使用 baseFont 和输入的 font 时，通过 getImageDataWithFont 函数检测得到的像素数据不一致，则说明自定义字体生效
+  return (
+    getImageDataWithFont(baseFont).join('') !==
+    getImageDataWithFont(font).join('')
+  )
+}
+
+const allFonts = computed(() => {
+  const all = [{ label: '常用字体', children: options.value.dicts.fonts }]
+  // 通过字体值获取字体列表
+  const getFontsByValues = (values) => {
+    return values.map(
+      (item) =>
+        options.value.dicts.fonts.find(({ value }) => value === item) || {
+          label: item,
+          item,
+        },
+    )
+  }
+  if ($recent.value.fonts.length > 0) {
+    all.unshift({
+      label: '最近使用',
+      children: getFontsByValues($recent.value.fonts),
+    })
+  }
+  if (usedFonts.length > 0) {
+    all.unshift({
+      label: '已使用的字体',
+      children: getFontsByValues(usedFonts),
+    })
+  }
+  return all
+})
+
+// 获取当前文档中所有已使用的字体
+const getUsedFonts = () => {
+  const content = JSON.stringify(editor.value.getJSON())
+  const matches = content.match(/"fontFamily":"([^"]+)"/g)
+  if (matches) {
+    matches.forEach((item) => {
+      const font = item.replace('"fontFamily":"', '').replace('"', '')
+      if (!usedFonts.includes(font)) usedFonts.push(font)
+    })
+  }
+}
+
+const setFontFamily = (fontFamily) => {
+  if (fontFamily) {
+    $recent.value.fonts.forEach((item, index) => {
+      if (item === fontFamily) {
+        $recent.value.fonts.splice(index, 1)
+      }
+    })
+    $recent.value.fonts.unshift(fontFamily)
+    if ($recent.value.fonts.length > 10) {
+      $recent.value.fonts.splice(10, 1)
+    }
+  }
+  editor.value.chain().focus().setFontFamily(fontFamily).run()
+  getUsedFonts()
+}
+
+watch(
+  () => editor.value,
+  (val) => {
+    if (val) getUsedFonts()
+  },
+)
+</script>
+
+<style lang="less">
+.font-family-item {
+  > span {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    width: 100%;
+    .not-support {
+      color: var(--umo-error-color);
+      font-size: 14px;
+    }
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/base/font-size.vue b/src/components_umo/menus/toolbar/base/font-size.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0a741ac1c91703c910e57c7ea9d82ce16bf859b8
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/font-size.vue
@@ -0,0 +1,109 @@
+<template>
+  <menus-button
+    v-if="select"
+    text="字体大小"
+    menu-type="select"
+    hide-text
+    :style="{ width: $toolbar.mode !== 'classic' ? '80px' : '58px' }"
+    :select-options="fontSizes"
+    :value="editor?.getAttributes('textStyle').fontSize || '14px'"
+    v-bind="$attrs"
+    placeholder="字号"
+    filterable
+    @menu-click="setFontSize"
+  >
+  </menus-button>
+  <menus-button
+    ico="font-size-increase"
+    text="增大字号"
+    hide-text
+    @menu-click="increaseFontSize"
+  />
+  <menus-button
+    ico="font-size-decrease"
+    text="减小字号"
+    hide-text
+    @menu-click="decreaseFontSize"
+  />
+</template>
+
+<script setup>
+const props = defineProps({
+  select: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const { editor } = useStore()
+const $toolbar = useState('toolbar')
+
+const fontSizes = [
+  { label: '默认', value: '14px', order: 4 },
+  { label: '初号', value: '42pt', order: 20 }, //56
+  { label: '小初', value: '36pt', order: 19 }, //48
+  { label: '一号', value: '26pt', order: 16 }, //35
+  { label: '小一', value: '24pt', order: 15 }, //32
+  { label: '二号', value: '22pt', order: 14 }, //29
+  { label: '小二', value: '18pt', order: 11 }, //24
+  { label: '三号', value: '16pt', order: 10 }, //22
+  { label: '小三', value: '15pt', order: 9 }, //21
+  { label: '四号', value: '14pt', order: 7 }, //19
+  { label: '小四', value: '12pt', order: 4 }, //16
+  { label: '五号', value: '10.5pt', order: 1 }, //14
+  { label: '小五', value: '9pt', order: 3 }, //12
+  { label: '六号', value: '7.5pt', order: 1 }, //10
+  { label: '小六', value: '6.5pt', order: 0 }, //9
+  { label: '10', value: '10px', order: 1 },
+  { label: '11', value: '11px', order: 2 },
+  { label: '12', value: '12px', order: 3 },
+  { label: '16', value: '16px', order: 5 },
+  { label: '18', value: '18px', order: 6 },
+  { label: '20', value: '20px', order: 8 },
+  { label: '22', value: '22px', order: 10 },
+  { label: '24', value: '24px', order: 11 },
+  { label: '26', value: '26px', order: 12 },
+  { label: '28', value: '28px', order: 13 },
+  { label: '32', value: '32px', order: 15 },
+  { label: '36', value: '36px', order: 17 },
+  { label: '42', value: '42px', order: 18 },
+  { label: '48', value: '48px', order: 19 },
+  { label: '72', value: '72px', order: 21 },
+  { label: '96', value: '96px', order: 22 },
+]
+
+// 设置字体大小
+const setFontSize = (fontSize) => {
+  editor.value.chain().focus().setFontSize(fontSize).run()
+}
+
+// 增大字号
+const increaseFontSize = () => {
+  const { fontSize } = editor.value.getAttributes('textStyle')
+  if (fontSize) {
+    const size = fontSizes.find(({ value }) => value === fontSize)
+    if (!size) return
+    const nextFont = fontSizes.find(({ order }) => order === size.order + 1)
+    if (nextFont) {
+      setFontSize(nextFont.value)
+    }
+  } else {
+    setFontSize('16px')
+  }
+}
+
+// 减小字号
+const decreaseFontSize = () => {
+  const { fontSize } = editor.value.getAttributes('textStyle')
+  if (fontSize) {
+    const size = fontSizes.find(({ value }) => value === fontSize)
+    if (!size) return
+    const prevFont = fontSizes.find(({ order }) => order === size.order - 1)
+    if (prevFont) {
+      setFontSize(prevFont.value)
+    }
+  } else {
+    setFontSize('14px')
+  }
+}
+</script>
diff --git a/src/components_umo/menus/toolbar/base/format-paint.vue b/src/components_umo/menus/toolbar/base/format-paint.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3b7c49b280c439585b3b957441d3c5481c6a02bd
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/format-paint.vue
@@ -0,0 +1,10 @@
+<template>
+  <menus-button
+    ico="format-paint"
+    text="格式刷"
+    tooltip="格式刷: 双击可重复使用"
+    hide-text
+  />
+</template>
+
+<script setup></script>
diff --git a/src/components_umo/menus/toolbar/base/heading.vue b/src/components_umo/menus/toolbar/base/heading.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2fad859ab5b9d1a629ecc557cd7dc94a298b4d27
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/heading.vue
@@ -0,0 +1,285 @@
+<template>
+  <div
+    v-if="$toolbar.mode !== 'classic'"
+    class="toolbar-headding"
+    :class="{ unfold: popupVisible }"
+    :disabled="!editor?.isEditable"
+  >
+    <div class="heading-container">
+      <template v-for="(item, index) in options" :key="item.value">
+        <div
+          class="card"
+          :class="{ active: item.value === currentValue && editor?.isEditable }"
+          v-if="index < 4"
+          @click="setParagraphOrHeading(item.value)"
+        >
+          <div class="title" :class="item.desc">{{ item.label }}</div>
+          <div class="subtitle">{{ item.desc }}</div>
+        </div>
+      </template>
+      <t-popup
+        :attach="container"
+        trigger="click"
+        placement="bottom-right"
+        overlay-class-name="heading-container-popup"
+        destroy-on-close
+        :visible="popupVisible"
+      >
+        <div class="arrow" @click="popupVisible = !popupVisible">
+          <icon name="arrow-down" />
+        </div>
+        <template #content>
+          <div ref="popupContentRef" class="heading-container">
+            <template v-for="(item, index) in options" :key="item.value">
+              <div
+                class="card"
+                :class="{
+                  active: item.value === currentValue && editor?.isEditable,
+                }"
+                v-if="index >= 4"
+                @click="setParagraphOrHeading(item.value)"
+              >
+                <div class="title" :class="item.desc">{{ item.label }}</div>
+                <div class="subtitle">{{ item.desc }}</div>
+              </div>
+            </template>
+          </div>
+        </template>
+      </t-popup>
+    </div>
+  </div>
+  <menus-button
+    v-else
+    text="设置标题，可依据标题生成大纲"
+    hide-text
+    menu-type="select"
+    :style="{ width: '70px' }"
+    placeholder="标题"
+    borderless
+    :value="currentValue"
+    @menu-click="setParagraphOrHeading"
+  >
+    <t-option
+      v-for="item in options"
+      class="editor-heading-select-option"
+      :key="item.value"
+      :value="item.value"
+      :label="item.label"
+    >
+      <div class="heading-size" :class="item.desc">{{ item.label }}</div>
+    </t-option>
+  </menus-button>
+</template>
+
+<script setup>
+let { popupVisible } = usePopup()
+const { container, editor } = useStore()
+const $toolbar = useState('toolbar')
+const popupContentRef = ref(null)
+
+const options = [
+  { label: '正文', desc: 'text', value: 'paragraph' },
+  { label: '标题 1', desc: 'h1', value: 1 },
+  { label: '标题 2', desc: 'h2', value: 2 },
+  { label: '标题 3', desc: 'h3', value: 3 },
+  { label: '标题 4', desc: 'h4', value: 4 },
+  { label: '标题 5', desc: 'h5', value: 5 },
+  { label: '标题 6', desc: 'h6', value: 6 },
+]
+
+const currentValue = computed(() => {
+  const heading = (level) => editor.value?.isActive('heading', { level })
+  if (editor.value) {
+    if (editor.value?.isActive('paragraph')) return 'paragraph'
+    if (heading(1)) return 1
+    if (heading(2)) return 2
+    if (heading(3)) return 3
+    if (heading(4)) return 4
+    if (heading(5)) return 5
+    if (heading(6)) return 6
+  }
+  return ''
+})
+
+const setParagraphOrHeading = (value) => {
+  if (value === 'paragraph') {
+    editor.value?.chain().focus().setParagraph().run()
+  } else {
+    editor.value?.chain().focus().toggleHeading({ level: value }).run()
+  }
+  popupVisible.value = false
+}
+
+onClickOutside(
+  popupContentRef,
+  () => {
+    popupVisible.value = false
+  },
+  {
+    ignore: ['.umo-popup'],
+  },
+)
+</script>
+
+<style lang="less" scoped>
+.toolbar-headding {
+  width: 318px;
+  height: 56px;
+  position: relative;
+  z-index: 10;
+  overflow: hidden;
+  border-radius: 3px;
+  box-sizing: border-box;
+  &[disabled='true'] {
+    pointer-events: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  &.unfold {
+    overflow: visible;
+    .heading-container {
+      border-color: var(--umo-border-color-light);
+      border-bottom: none;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}
+.heading-container {
+  display: flex;
+  background-color: var(--umo-button-hover-background);
+  padding: 2px 5px;
+  flex-flow: row wrap;
+  align-content: flex-start;
+  border-radius: var(--umo-radius);
+  box-sizing: border-box;
+  border: solid 1px transparent;
+  .card {
+    background-color: var(--umo-color-white);
+    border: solid 1px var(--umo-border-color-light);
+    border-radius: var(--umo-radius);
+    margin: 4px 2px;
+    text-align: center;
+    padding: 5px 10px;
+    box-sizing: border-box;
+    cursor: pointer;
+    flex: 0 0 68px;
+    height: 42px;
+    &:hover,
+    &.active {
+      border-color: var(--umo-primary-color);
+    }
+    .title {
+      font-size: 14px;
+      line-height: 18px;
+      font-weight: 600;
+      &.text {
+        font-size: 12px;
+        font-weight: 400;
+      }
+      &.h1 {
+        font-size: 16px;
+      }
+      &.h2 {
+        font-size: 14px;
+      }
+      &.h3 {
+        font-size: 13px;
+      }
+      &.h4 {
+        font-size: 12px;
+      }
+      &.h5 {
+        font-size: 11px;
+      }
+      &.h6 {
+        font-size: 10px;
+      }
+    }
+    .subtitle {
+      font-size: 8px;
+      color: var(--umo-text-color-light);
+      text-transform: capitalize;
+      margin-top: 3px;
+      line-height: 1;
+    }
+  }
+  .arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    height: 40px;
+    border-radius: 3px;
+    cursor: pointer;
+    z-index: 20;
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    .icon {
+      font-size: 12px;
+      color: var(--umo-text-color-light);
+    }
+  }
+}
+.unfold {
+  .arrow {
+    :deep(.icon) {
+      transform: rotate(-180deg);
+    }
+  }
+}
+</style>
+
+<style lang="less">
+.heading-container-popup {
+  .umo-popup__content {
+    box-shadow: none;
+    border: solid 1px var(--umo-border-color);
+    border-top: none;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    margin: 1px -8px 0 0 !important;
+    padding: 0;
+    width: 318px;
+    .heading-container {
+      border-top-right-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+}
+.editor-heading-select-option {
+  height: auto !important;
+  .heading-size {
+    line-height: 2em;
+    font-weight: 600;
+    min-width: 100px;
+    color: var(--umo-text-color);
+  }
+  .text {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 2.4em;
+  }
+  .h1 {
+    font-size: 24px;
+  }
+  .h2 {
+    font-size: 20px;
+  }
+  .h3 {
+    font-size: 18px;
+  }
+  .h4 {
+    font-size: 16px;
+  }
+  .h5 {
+    font-size: 14px;
+  }
+  .h6 {
+    font-size: 12px;
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/base/highlight.vue b/src/components_umo/menus/toolbar/base/highlight.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1615901bfb05d76ddc7d61b14eb00d7f2dbaff34
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/highlight.vue
@@ -0,0 +1,106 @@
+<template>
+  <menus-button
+    text="高亮显示"
+    shortcut="Ctrl+Shift+H"
+    menu-type="dropdown"
+    popup-handle="arrow"
+    hide-text
+    overlay-class-name="hightlight-dropdown"
+    @menu-click="highlightChange(hightlight)"
+  >
+    <icon
+      name="highlight"
+      class="icon-highlight"
+      :style="{ backgroundColor: hightlight.bgcolor, color: hightlight.color }"
+    />
+    <template #dropmenu>
+      <t-dropdown-menu>
+        <t-dropdown-item
+          class="text-highlight-menu"
+          v-for="item in options"
+          :key="item.value"
+          :value="item.value"
+          :style="{ backgroundColor: item.bgcolor, color: item.color }"
+          :divider="item.divider"
+          @click="highlightChange(item)"
+        >
+          <icon name="highlight" />
+          <span>{{ item.label }}</span>
+        </t-dropdown-item>
+        <t-dropdown-item
+          class="text-highlight-menu clear-format-menu"
+          @click="clearFormat()"
+        >
+          <icon name="clear-format" />
+          <span>清除高亮</span>
+        </t-dropdown-item>
+      </t-dropdown-menu>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+const { editor } = useStore()
+
+const options = [
+  { label: '黄色背景', value: 1, bgcolor: '#ffff8a' },
+  { label: '绿色背景', value: 2, bgcolor: '#a7ffa7' },
+  { label: '紫色背景', value: 3, bgcolor: '#e6afff' },
+  { label: '蓝色背景', value: 4, bgcolor: '#83d3ff', divider: true },
+  { label: '红色字体', value: 5, color: '#e71313' },
+  { label: '绿色字体', value: 6, color: '#128a00', divider: true },
+]
+let hightlight = $ref({})
+const highlightChange = (item) => {
+  if (item.bgcolor) {
+    editor.value?.chain().focus().setHighlight({ color: item.bgcolor }).run()
+  }
+  if (item.color) {
+    editor.value?.chain().focus().setColor(item.color).run()
+  }
+  hightlight = item
+}
+const clearFormat = () => {
+  editor.value?.chain().focus().unsetHighlight().run()
+  editor.value?.chain().focus().unsetColor().run()
+  hightlight = {}
+}
+</script>
+
+<style lang="less" scoped>
+.icon-highlight {
+  border-radius: 2px;
+}
+</style>
+
+<style lang="less">
+.text-hightlight-dropdown {
+  .umo-popup__content {
+    .umo-divider {
+      margin-top: 8px;
+      margin-bottom: 8px;
+    }
+  }
+}
+.text-highlight-menu {
+  width: 140px;
+  margin-bottom: 6px;
+  border: solid 1px transparent;
+  &.clear-format-menu {
+    margin-bottom: 0;
+  }
+  &:hover {
+    border-color: var(--umo-primary-color);
+    background-color: inherit;
+  }
+  .umo-dropdown__item-text {
+    display: flex;
+    align-items: center;
+    padding: 2px;
+    .icon {
+      font-size: 16px;
+      margin-right: 5px;
+    }
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/base/indent.vue b/src/components_umo/menus/toolbar/base/indent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..71066dbf483308301afda9c1dd157ba5b5dd3ecf
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/indent.vue
@@ -0,0 +1,13 @@
+<template>
+  <menus-button
+    text="增加缩进"
+    ico="indent"
+    shortcut="Tab"
+    hide-text
+    @menu-click="editor?.chain().focus().indent().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/base/italic.vue b/src/components_umo/menus/toolbar/base/italic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5fd37911483c11f0cbaa94b51d6a43c183a129d9
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/italic.vue
@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    text="斜体"
+    ico="italic"
+    shortcut="Ctrl+I"
+    hide-text
+    :menu-active="editor?.isActive('italic')"
+    :disabled="!editor?.can().chain().focus().toggleItalic().run()"
+    @menu-click="editor?.chain().focus().toggleItalic().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/base/line-height.vue b/src/components_umo/menus/toolbar/base/line-height.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ff37ee1b6da8afd26f057819aa05574117845b89
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/line-height.vue
@@ -0,0 +1,30 @@
+<template>
+  <menus-button
+    text="行高"
+    ico="line-height"
+    menu-type="dropdown"
+    hide-text
+    :select-options="lineHeights"
+    @click="setLineHeight"
+  />
+</template>
+
+<script setup>
+const { options, editor } = useStore()
+
+const lineHeights = computed(() => {
+  const result = options.value.dicts.lineHeights.map((item) => {
+    return {
+      content: item.default ? item.label + ' (默认)' : item.label,
+      value: item.value,
+      active: editor.value?.isActive({ lineHeight: item.value }),
+    }
+  })
+  return result
+})
+
+const setLineHeight = ({ content, value }) => {
+  if (!content) return
+  editor.value?.chain().focus().setLineHeight(value).run()
+}
+</script>
diff --git a/src/components_umo/menus/toolbar/base/markdown.vue b/src/components_umo/menus/toolbar/base/markdown.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a4ad9eab5255b24d503e3471de131912e000d01f
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/markdown.vue
@@ -0,0 +1,42 @@
+<template>
+  <menus-button
+    v-if="options.document.enableMarkdown"
+    ico="markdown"
+    text="Markdown"
+    :tooltip="
+      options.document.enableMarkdown
+        ? '关闭 Markdown 模式'
+        : '切换到 Markdown 模式'
+    "
+    :menu-active="$document.markdown"
+    huge
+    @menu-click="toggleMarkdownMode"
+  />
+</template>
+
+<script setup>
+const { options, editorDestroyed } = useStore()
+const $document = useState('document')
+
+const toggleMarkdownMode = () => {
+  const dialog = useConfirm({
+    theme: 'warning',
+    header: $document.value.enableMarkdown
+      ? '关闭 Markdown 模式'
+      : '切换到 Markdown 模式',
+    body: '此操作会重置编辑器，切换后当前历史记录会丢失，将无法进行“撤回”等操作，确定要现在切换吗？',
+    confirmBtn: {
+      theme: 'warning',
+      content: '立即切换',
+    },
+    async onConfirm() {
+      $document.value.markdown = !$document.value.markdown
+      dialog.destroy()
+      await nextTick()
+      editorDestroyed.value = true
+      await nextTick()
+      editorDestroyed.value = false
+    },
+  })
+}
+</script>
diff --git a/src/components_umo/menus/toolbar/base/ordered-list.vue b/src/components_umo/menus/toolbar/base/ordered-list.vue
new file mode 100644
index 0000000000000000000000000000000000000000..49e017868a409a21ec3e584d0f9761b7a36f15dc
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/ordered-list.vue
@@ -0,0 +1,166 @@
+<template>
+  <menus-button
+    ico="ordered-list"
+    text="数字编号"
+    shortcut="Ctrl+Shift+7"
+    menu-type="popup"
+    popup-handle="arrow"
+    hide-text
+    :popup-visible="popupVisible"
+    :menu-active="editor?.isActive('orderedList')"
+    @toggle-popup="togglePopup"
+    @menu-click="toggleOrderedList(options[0].value)"
+  >
+    <template #content>
+      <div class="ordered-list-group">
+        <tooltip
+          v-for="item in options"
+          :key="item.value"
+          :content="item.label"
+        >
+          <div
+            class="ordered-list-item"
+            :class="{ active: listType == item.value }"
+            @click="toggleOrderedList(item.value)"
+          >
+            <icon
+              class="icon-ordered-list"
+              :name="`ordered-list-${item.value}`"
+            />
+          </div>
+        </tooltip>
+      </div>
+      <div class="ordered-list-divider"></div>
+      <div class="ordered-list-title">列表属性</div>
+      <div class="ordered-list-properties">
+        <t-input-number
+          v-model="startAt"
+          :min="1"
+          align="left"
+          theme="column"
+          @change="changeOrderedListStart"
+        >
+          <template #label><span>起始编号:</span></template>
+        </t-input-number>
+      </div>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+let { popupVisible, togglePopup } = usePopup()
+const { editor } = useStore()
+
+const options = [
+  { label: '数字', value: 'decimal' },
+  { label: '以0的开头的数字', value: 'decimal-leading-zero' },
+  { label: '小写罗马数字', value: 'lower-roman' },
+  { label: '大写罗马数字', value: 'upper-roman' },
+  { label: '小写英文编号', value: 'lower-latin' },
+  { label: '大写英文编号', value: 'upper-latin' },
+  { label: '中文编号', value: 'trad-chinese-informal' },
+  { label: '大写中文编号', value: 'simp-chinese-formal' },
+]
+
+// 列表类型
+let listType = $ref('left')
+watch(
+  () => popupVisible.value,
+  (val) => {
+    if (val && editor.value) {
+      const { listStyleType } = editor.value.getAttributes('orderedList')
+      listType = listStyleType?.listStyleType || listStyleType || ''
+    }
+  },
+)
+const toggleOrderedList = (listStyleType) => {
+  const chain = editor.value?.chain().focus()
+  if (!editor.value?.isActive('orderedList')) {
+    chain
+      .toggleOrderedList()
+      .updateAttributes('orderedList', { listStyleType })
+      .run()
+  }
+  // 切换列表类型
+  else if (
+    editor.value.getAttributes('orderedList').listStyleType !== listStyleType
+  ) {
+    chain.updateAttributes('orderedList', { listStyleType }).run()
+  }
+  // 关闭列表类型
+  else {
+    chain.toggleOrderedList().run()
+  }
+  listType = listStyleType
+  popupVisible.value = false
+}
+
+// 起始编号
+let startAt = $ref(1)
+const changeOrderedListStart = () => {
+  if (editor.value) {
+    editor.value
+      ?.chain()
+      .focus()
+      .updateAttributes('orderedList', { start: startAt })
+      .run()
+  }
+}
+watch(
+  () => popupVisible.value,
+  (val) => {
+    if (val && editor.value) {
+      startAt = editor.value.getAttributes('orderedList').start
+    } else {
+      startAt = 1
+    }
+  },
+)
+</script>
+
+<style lang="less" scoped>
+.ordered-list-group {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 248px;
+  margin-bottom: 10px;
+  .ordered-list-item {
+    cursor: pointer;
+    padding: 5px;
+    border: solid 1px var(--umo-border-color);
+    box-sizing: border-box;
+    &:nth-child(4n) {
+      margin-right: 0;
+    }
+    &:hover {
+      background-color: var(--umo-button-hover-background);
+    }
+    &.active {
+      border-color: var(--umo-primary-color);
+    }
+  }
+  .icon-ordered-list {
+    font-size: 44px;
+  }
+}
+.ordered-list-title {
+  color: var(--umo-text-color-light);
+  font-size: 12px;
+  margin: 7px 0 4px;
+}
+.ordered-list-divider {
+  height: 1px;
+  background-color: var(--umo-border-color-light);
+  margin: 5px 0 0;
+}
+.ordered-list-properties {
+  display: flex;
+  flex-direction: column;
+  :deep(.umo-input-number) {
+    width: 248px;
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/base/outdent.vue b/src/components_umo/menus/toolbar/base/outdent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4acdc1169802395b0f40edc24f0b9f9187e2ad82
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/outdent.vue
@@ -0,0 +1,13 @@
+<template>
+  <menus-button
+    ico="outdent"
+    text="减少缩进"
+    shortcut="Shift+Tab"
+    hide-text
+    @menu-click="editor?.chain().focus().outdent().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/base/print.vue b/src/components_umo/menus/toolbar/base/print.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f2540664c2888b4322fe4745472ac99c485340d7
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/print.vue
@@ -0,0 +1,16 @@
+<template>
+  <menus-button
+    text="打印"
+    ico="print"
+    shortcut="Ctrl+P"
+    huge
+    @menu-click="printing = true"
+  >
+  </menus-button>
+</template>
+
+<script setup>
+const { printing } = useStore()
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/components_umo/menus/toolbar/base/quote.vue b/src/components_umo/menus/toolbar/base/quote.vue
new file mode 100644
index 0000000000000000000000000000000000000000..173aacf1a609f0391a119c8ecd9e0a093bcff9dc
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/quote.vue
@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    ico="quote"
+    text="引用"
+    shortcut="Ctrl+Shift+B"
+    hide-text
+    :menu-active="editor?.isActive('blockquote')"
+    :disabled="!editor?.can().chain().focus().toggleBlockquote().run()"
+    @menu-click="editor?.chain().focus().toggleBlockquote().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/base/redo.vue b/src/components_umo/menus/toolbar/base/redo.vue
new file mode 100644
index 0000000000000000000000000000000000000000..184aac574a93e5e138c62b02778abb86c8f339d2
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/redo.vue
@@ -0,0 +1,14 @@
+<template>
+  <menus-button
+    ico="redo"
+    text="撤销"
+    shortcut="Ctrl+Y / Ctrl+Shift+Z"
+    hide-text
+    :disabled="!editor?.can().chain().focus().redo().run()"
+    @menu-click="editor?.chain().focus().redo().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/base/search-replace.vue b/src/components_umo/menus/toolbar/base/search-replace.vue
new file mode 100644
index 0000000000000000000000000000000000000000..629c4b6dfb1b3df6dcad196b54b4dfb301726eeb
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/search-replace.vue
@@ -0,0 +1,13 @@
+<template>
+  <menus-button
+    ico="search-replace"
+    text="查找替换"
+    shortcut="Ctrl+F"
+    huge
+    @menu-click="searchReplace = true"
+  />
+</template>
+
+<script setup>
+const { searchReplace } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/base/select-all.vue b/src/components_umo/menus/toolbar/base/select-all.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d0c4686071e5cc64b5a2e1c1f96bad44dc8212c4
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/select-all.vue
@@ -0,0 +1,13 @@
+<template>
+  <menus-button
+    ico="select-all"
+    text="全选"
+    shortcut="Ctrl+A"
+    hide-text
+    @menu-click="editor?.chain().focus().selectAll().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/base/strike.vue b/src/components_umo/menus/toolbar/base/strike.vue
new file mode 100644
index 0000000000000000000000000000000000000000..09c33098e998786b2d9ef095cfd27c25181d03c0
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/strike.vue
@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    ico="strike"
+    text="删除线"
+    shortcut="Ctrl+Shift+X"
+    hide-text
+    :menu-active="editor?.isActive('strike')"
+    :disabled="!editor?.can().chain().focus().toggleStrike().run()"
+    @menu-click="editor?.chain().focus().toggleStrike().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/base/subscript.vue b/src/components_umo/menus/toolbar/base/subscript.vue
new file mode 100644
index 0000000000000000000000000000000000000000..70ffadae186791a7fe188d2561ca5b06ff7dff56
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/subscript.vue
@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    ico="subscript"
+    text="下标"
+    shortcut="Ctrl+,"
+    hide-text
+    :menu-active="editor?.isActive('subscript')"
+    :disabled="!editor?.can().chain().focus().toggleSubscript().run()"
+    @menu-click="editor?.commands.toggleSubscript()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/base/superscript.vue b/src/components_umo/menus/toolbar/base/superscript.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2e917b937806ab134dee5c0206c65c4b40f08ce9
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/superscript.vue
@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    ico="superscript"
+    text="上标"
+    shortcut="Ctrl+."
+    hide-text
+    :menu-active="editor?.isActive('superscript')"
+    :disabled="!editor?.can().chain().focus().toggleSuperscript().run()"
+    @menu-click="editor?.commands.toggleSuperscript()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/base/task-list.vue b/src/components_umo/menus/toolbar/base/task-list.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c920fef946ddb1b0be20025a91c9eb57acb75b05
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/task-list.vue
@@ -0,0 +1,39 @@
+<template>
+  <menus-button
+    ico="task-list"
+    text="待办事项"
+    shortcut="Ctrl+Shift+9"
+    menu-type="dropdown"
+    popup-handle="arrow"
+    hide-text
+    :menu-active="editor?.isActive('taskList')"
+    @menu-click="editor?.chain().focus().toggleTaskList().run()"
+  >
+    <template #dropmenu>
+      <t-dropdown-menu>
+        <t-dropdown-item
+          :disabled="!editor?.can().splitListItem('taskItem')"
+          @click="editor?.chain().focus().splitListItem('taskItem').run()"
+        >
+          增加任务
+        </t-dropdown-item>
+        <t-dropdown-item
+          :disabled="!editor?.can().sinkListItem('taskItem')"
+          @click="editor?.chain().focus().sinkListItem('taskItem').run()"
+        >
+          设为子任务
+        </t-dropdown-item>
+        <t-dropdown-item
+          :disabled="!editor?.can().liftListItem('taskItem')"
+          @click="editor?.chain().focus().liftListItem('taskItem').run()"
+        >
+          移除任务
+        </t-dropdown-item>
+      </t-dropdown-menu>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/base/underline.vue b/src/components_umo/menus/toolbar/base/underline.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f1ae6a929c490bc04397daf94b47a92084346adb
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/underline.vue
@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    ico="underline"
+    text="下划线"
+    shortcut="Ctrl+U"
+    hide-text
+    :menu-active="editor?.isActive('underline')"
+    :disabled="!editor?.can().chain().focus().toggleUnderline().run()"
+    @menu-click="editor?.chain().focus().toggleUnderline().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/base/undo.vue b/src/components_umo/menus/toolbar/base/undo.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e4da80cf4ca004a8d3111359f42282aa3ddd0aba
--- /dev/null
+++ b/src/components_umo/menus/toolbar/base/undo.vue
@@ -0,0 +1,14 @@
+<template>
+  <menus-button
+    ico="undo"
+    text="撤销"
+    shortcut="Ctrl+Z"
+    hide-text
+    :disabled="!editor?.can().chain().focus().undo().run()"
+    @menu-click="editor?.chain().focus().undo().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/export/embed.vue b/src/components_umo/menus/toolbar/export/embed.vue
new file mode 100644
index 0000000000000000000000000000000000000000..997ff65582b9d9550247d99c939220165265784b
--- /dev/null
+++ b/src/components_umo/menus/toolbar/export/embed.vue
@@ -0,0 +1,63 @@
+<template>
+  <menus-button
+    ico="embed"
+    text="Embed"
+    huge
+    @menu-click="dialogVisible = true"
+  />
+  <modal
+    :visible="dialogVisible"
+    icon="embed"
+    title="Embed 嵌入"
+    width="420px"
+    confirmBtn="复制"
+    @confirm="copyEmbed"
+    @close="dialogVisible = false"
+  >
+    <div class="embed-container">
+      <div class="embed-tip">
+        复制后，请手动修改 &lt;iframe&gt; 的宽度和高度，以便获得更好的浏览效果。
+      </div>
+      <t-textarea
+        class="embed-textarea"
+        :value="embedValue"
+        readonly
+        autosize
+      ></t-textarea>
+    </div>
+  </modal>
+</template>
+
+<script setup>
+const { options } = useStore()
+let dialogVisible = $ref(false)
+
+const embedValue = computed(() => {
+  return `<iframe src="${options.value.shareUrl}" width="100%" height="720px" frameborder="0" allowfullscreen="true"></iframe>`
+})
+
+const copyEmbed = () => {
+  const { copy } = useClipboard({ source: embedValue })
+  copy()
+  useMessage('success', '代码已复制到剪切板')
+  dialogVisible = false
+}
+</script>
+
+<style lang="less" scoped>
+.embed-container {
+  padding: 2px;
+  .embed-tip {
+    font-size: 12px;
+    color: var(--umo-text-color-light);
+    margin-bottom: 6px;
+    line-height: 1.4;
+  }
+  .embed-textarea {
+    :deep(textarea) {
+      word-break: break-all;
+      word-wrap: break-word;
+    }
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/export/html.vue b/src/components_umo/menus/toolbar/export/html.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d98b8182c19b3bf1c11910f09e2eaeb7069130cc
--- /dev/null
+++ b/src/components_umo/menus/toolbar/export/html.vue
@@ -0,0 +1,17 @@
+<template>
+  <menus-button ico="html5" text="HTML" huge @menu-click="saveHtmlFile" />
+</template>
+
+<script setup>
+import { saveAs } from 'file-saver'
+
+const { options, editor } = useStore()
+
+const saveHtmlFile = () => {
+  if (!editor.value) return
+  const blob = new Blob([editor.value?.getHTML()], {
+    type: 'text/html;charset=utf-8',
+  })
+  saveAs(blob, `${options.value.document.title}.html`)
+}
+</script>
diff --git a/src/components_umo/menus/toolbar/export/image.vue b/src/components_umo/menus/toolbar/export/image.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5294bd4c8d922b48706ac7f1f717f670a57be77c
--- /dev/null
+++ b/src/components_umo/menus/toolbar/export/image.vue
@@ -0,0 +1,47 @@
+<template>
+  <menus-button
+    ico="image"
+    text="图片"
+    menu-type="dropdown"
+    huge
+    :select-options="formats"
+    @click="saveImage"
+  />
+</template>
+
+<script setup>
+import { toBlob } from 'dom-to-image-more'
+import { saveAs } from 'file-saver'
+
+const { container, options, page } = useStore()
+
+const formats = [
+  { content: 'PNG 格式', value: 'png' },
+  { content: 'JPG 格式', value: 'jpg' },
+]
+
+const saveImage = async ({ content, value }) => {
+  if (!content) return
+  const zoomLevel = page.value.zoomLevel
+  try {
+    page.value.zoomLevel = 100
+    const node = document.querySelector(`${container} .page-content`)
+    const blob = await toBlob(node, { scale: devicePixelRatio })
+    saveAs(
+      blob,
+      `${options.value.document.title}${devicePixelRatio > 1 ? '@' + devicePixelRatio + 'x' : ''}.${value}`,
+    )
+  } catch {
+    const dialog = useAlert({
+      theme: 'warning',
+      header: '错误提示',
+      body: '导出图片失败，请重试或尝试刷新页面。',
+      onConfirm() {
+        dialog.destroy()
+      },
+    })
+  } finally {
+    page.value.zoomLevel = zoomLevel
+  }
+}
+</script>
diff --git a/src/components_umo/menus/toolbar/export/pdf.vue b/src/components_umo/menus/toolbar/export/pdf.vue
new file mode 100644
index 0000000000000000000000000000000000000000..32440cc27024b4d68d6c0be1fd60905b0f7849d8
--- /dev/null
+++ b/src/components_umo/menus/toolbar/export/pdf.vue
@@ -0,0 +1,5 @@
+<template>
+  <menus-button ico="pdf" text="PDF" huge />
+</template>
+
+<script setup></script>
diff --git a/src/components_umo/menus/toolbar/export/share.vue b/src/components_umo/menus/toolbar/export/share.vue
new file mode 100644
index 0000000000000000000000000000000000000000..10bd955ab0624cc657dca684b7eb39f23abaa6bb
--- /dev/null
+++ b/src/components_umo/menus/toolbar/export/share.vue
@@ -0,0 +1,57 @@
+<template>
+  <menus-button
+    ico="share"
+    text="文档分享"
+    huge
+    @menu-click="dialogVisible = true"
+  />
+  <modal
+    :visible="dialogVisible"
+    icon="share"
+    title="文档分享"
+    width="420px"
+    confirmBtn="复制"
+    @confirm="copyLink"
+    @close="dialogVisible = false"
+  >
+    <div class="share-container">
+      <div class="share-tip">复制链接发给需要分享的人。</div>
+      <t-textarea
+        class="share-textarea"
+        :value="options.shareUrl"
+        readonly
+        autosize
+      ></t-textarea>
+    </div>
+  </modal>
+</template>
+
+<script setup>
+const { options } = useStore()
+let dialogVisible = $ref(false)
+
+const copyLink = () => {
+  const { copy } = useClipboard({ source: options.value.shareUrl })
+  copy()
+  useMessage('success', '链接已复制到剪切板')
+  dialogVisible = false
+}
+</script>
+
+<style lang="less" scoped>
+.share-container {
+  padding: 2px;
+  .share-tip {
+    font-size: 12px;
+    color: var(--umo-text-color-light);
+    margin-bottom: 6px;
+    line-height: 1.4;
+  }
+  .share-textarea {
+    :deep(textarea) {
+      word-break: break-all;
+      word-wrap: break-word;
+    }
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/export/text.vue b/src/components_umo/menus/toolbar/export/text.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ea74a8d7aaeabce90408efc378a20621069dc7f5
--- /dev/null
+++ b/src/components_umo/menus/toolbar/export/text.vue
@@ -0,0 +1,17 @@
+<template>
+  <menus-button ico="text" text="文本文档" huge @menu-click="saveTextFile" />
+</template>
+
+<script setup>
+import { saveAs } from 'file-saver'
+
+const { options, editor } = useStore()
+
+const saveTextFile = () => {
+  if (!editor.value) return
+  const blob = new Blob([editor.value?.getText()], {
+    type: 'text/plain;charset=utf-8',
+  })
+  saveAs(blob, `${options.value.document.title}.txt`)
+}
+</script>
diff --git a/src/components_umo/menus/toolbar/insert/audio.vue b/src/components_umo/menus/toolbar/insert/audio.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c4b86b14225ad5593538e83647c534a1dc6a4673
--- /dev/null
+++ b/src/components_umo/menus/toolbar/insert/audio.vue
@@ -0,0 +1,12 @@
+<template>
+  <menus-button
+    ico="audio"
+    text="音频"
+    huge
+    @menu-click="editor.chain().focus().selectFiles('audio').run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/insert/code-block.vue b/src/components_umo/menus/toolbar/insert/code-block.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3425643a39e09c9f26e9caf480ec28b395060b5c
--- /dev/null
+++ b/src/components_umo/menus/toolbar/insert/code-block.vue
@@ -0,0 +1,13 @@
+<template>
+  <menus-button
+    ico="code-block"
+    text="代码块"
+    shortcut="Ctrl+Alt+C"
+    huge
+    @menu-click="editor.chain().focus().setCodeBlock().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/insert/date.vue b/src/components_umo/menus/toolbar/insert/date.vue
new file mode 100644
index 0000000000000000000000000000000000000000..863f7d8b03b6ebd7f061d67956e10e03883e8c42
--- /dev/null
+++ b/src/components_umo/menus/toolbar/insert/date.vue
@@ -0,0 +1,66 @@
+<template>
+  <menus-button
+    ico="date"
+    text="日期"
+    menu-type="dropdown"
+    huge
+    :select-options="options"
+    @click="setDate"
+  />
+</template>
+
+<script setup>
+const formDate = (format) => useDateFormat(useNow(), format).value
+const formatDateToChinese = (dateStr) => {
+  const replaceDigits = (num) => {
+    const digits = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九']
+    return num
+      .toString()
+      .split('')
+      .map((n) => digits[n])
+      .join('')
+  }
+
+  return dateStr.replace(/\d+/g, (match) => {
+    if (match.length === 4) {
+      // 年份
+      return replaceDigits(match)
+    } else if (match.length === 1) {
+      // 月份或日期
+      return replaceDigits(match)
+    } else if (match.length === 2) {
+      const num1 = match.charAt(0)
+      const num2 = match.charAt(1)
+      if (num1 === '0') {
+        return replaceDigits(num1) + '十'
+      } else if (num1 === '1') {
+        return '十' + replaceDigits(num2)
+      } else if (num2 === '0') {
+        return replaceDigits(num1) + '十'
+      } else {
+        return replaceDigits(num1) + '十' + replaceDigits(num2)
+      }
+    }
+    return match // 其他情况不处理
+  })
+}
+
+const options = [
+  { content: formDate('YYYY年M月D日') },
+  { content: formDate('YYYY-M-D') },
+  { content: formDate('YYYY/M/D') },
+  { content: formDate('YYYY.M.D') },
+  { content: formDate('YYYY年M月') },
+  { content: formDate('YYYY年M月D日 dddd'), divider: true },
+  { content: formatDateToChinese(formDate('YYYY年M月D日')) },
+  { content: formatDateToChinese(formDate('YYYY年M月')) },
+  { content: formatDateToChinese(formDate('YYYY年M月D日 dddd')) },
+]
+
+const { editor } = useStore()
+
+const setDate = ({ content }) => {
+  if (!content) return
+  editor.value?.chain().focus().insertContent(content).run()
+}
+</script>
diff --git a/src/components_umo/menus/toolbar/insert/details.vue b/src/components_umo/menus/toolbar/insert/details.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fc95ca27620c2d166fa5bb0d50c9e964f88d0476
--- /dev/null
+++ b/src/components_umo/menus/toolbar/insert/details.vue
@@ -0,0 +1,14 @@
+<template>
+  <menus-button
+    ico="details"
+    text="详情"
+    huge
+    :menu-active="editor?.isActive('details')"
+    :disabled="!editor?.can().setDetails()"
+    @menu-click="editor?.chain().focus().setDetails().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/insert/emoji.vue b/src/components_umo/menus/toolbar/insert/emoji.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fa979b96b3556830ed52410ebb1450d73cbb29bf
--- /dev/null
+++ b/src/components_umo/menus/toolbar/insert/emoji.vue
@@ -0,0 +1,91 @@
+<template>
+  <menus-button
+    ico="emoji"
+    text="表情"
+    menu-type="popup"
+    huge
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <div class="emojis-container narrow-scrollbar">
+        <template v-for="(group, index) in options.dicts.emojis" :key="index">
+          <div class="emojis-group-title">{{ group.label }}</div>
+          <div class="emojis-group-container">
+            <div
+              class="emojis-group-item"
+              v-for="(item, i) in group.items.split(' ')"
+              :key="i"
+              @click="selectEmoji(item)"
+            >
+              {{ item }}
+            </div>
+          </div>
+        </template>
+      </div>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+let { popupVisible, togglePopup } = usePopup()
+const { options, editor } = useStore()
+
+const selectEmoji = (emoji) => {
+  editor.value?.chain().focus().insertContent(emoji).run()
+  popupVisible.value = false
+}
+</script>
+
+<style lang="less" scoped>
+.emojis-container {
+  width: 404px;
+  max-height: var(--umo-popup-max-height);
+  min-height: 320px;
+  overflow: auto;
+  margin: calc(var(--umo-popup-content-padding) * -1);
+}
+
+.emojis-group {
+  position: relative;
+  &-title {
+    color: var(--umo-text-color-light);
+    font-size: 12px;
+    position: sticky;
+    line-height: 2.4;
+    top: 0;
+    background-color: var(--umo-button-hover-background);
+    padding-left: calc(var(--umo-popup-content-padding) + 5px);
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+  &-container {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 10px var(--umo-popup-content-padding);
+    overflow: auto;
+    gap: 2px;
+  }
+  &-item {
+    flex-basis: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    line-height: 1em;
+    border-radius: var(--umo-radius);
+    cursor: pointer;
+    transition: background-color 0.2s;
+    font-size: 20px;
+    margin-bottom: 2px;
+    color: var(--umo-text-color);
+    transition: font-size 0.2s;
+    &:hover {
+      background-color: var(--umo-button-hover-background);
+      font-size: 24px;
+    }
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/insert/file.vue b/src/components_umo/menus/toolbar/insert/file.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5921a935421b13e3c5dc4983847b6ebd272af5d5
--- /dev/null
+++ b/src/components_umo/menus/toolbar/insert/file.vue
@@ -0,0 +1,12 @@
+<template>
+  <menus-button
+    ico="file"
+    text="文件"
+    huge
+    @menu-click="editor.chain().focus().selectFiles('file').run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/insert/hard-break.vue b/src/components_umo/menus/toolbar/insert/hard-break.vue
new file mode 100644
index 0000000000000000000000000000000000000000..aed2cca12898f200827e5da471978eb7b3f2845c
--- /dev/null
+++ b/src/components_umo/menus/toolbar/insert/hard-break.vue
@@ -0,0 +1,13 @@
+<template>
+  <menus-button
+    ico="hard-break"
+    text="换行"
+    huge
+    shortcut="Shift+Enter"
+    @menu-click="editor?.chain().focus().setHardBreak().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/insert/horizontal-line.vue b/src/components_umo/menus/toolbar/insert/horizontal-line.vue
new file mode 100644
index 0000000000000000000000000000000000000000..63c0021b2648255bbe76e667ac777d8f91046923
--- /dev/null
+++ b/src/components_umo/menus/toolbar/insert/horizontal-line.vue
@@ -0,0 +1,133 @@
+<template>
+  <menus-button
+    ico="horizontal-line"
+    text="分割线"
+    menu-type="popup"
+    huge
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <div class="page-divider-dropdown">
+        <div class="page-divider-item-title">
+          <span>分割线类型</span>
+        </div>
+        <div
+          class="page-divider-item"
+          v-for="item in options"
+          :key="item.value"
+          :value="item.value"
+          @click="setHorizontalLine(item)"
+        >
+          <hr
+            class="umo-page-divider"
+            :data-type="item.value"
+            :style="{ color: currentColor }"
+          />
+        </div>
+        <t-popup
+          v-model="colorPickerVisible"
+          :attach="container"
+          placement="right-bottom"
+          trigger="click"
+        >
+          <div
+            class="page-divider-item open-color-picker"
+            :class="{ active: colorPickerVisible }"
+          >
+            <span>分割线颜色</span>
+            <div class="arrow">
+              <icon name="arrow-down" />
+            </div>
+          </div>
+          <template #content>
+            <div class="page-divider-color-picker">
+              <color-picker default-color="#000" @change="colorChange" />
+            </div>
+          </template>
+        </t-popup>
+      </div>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+let { popupVisible, togglePopup } = usePopup()
+const { container, editor } = useStore()
+
+const options = [
+  { label: '细线', value: 'signle' },
+  { label: '双细线', value: 'double' },
+  { label: '点线', value: 'dotted' },
+  { label: '虚线', value: 'dashed' },
+  { label: '双虚线', value: 'dashed-double' },
+  { label: '粗线', value: 'signle-bold' },
+  { label: '粗细线', value: 'double-bold-top' },
+  { label: '细粗线', value: 'double-bold-bottom' },
+  { label: '波浪线', value: 'wavy' },
+]
+
+let currentColor = $ref('#000')
+let colorPickerVisible = $ref(false)
+const colorChange = (color) => {
+  currentColor = color
+  colorPickerVisible = false
+}
+
+const setHorizontalLine = ({ value }) => {
+  console.log(value)
+  if (!value || !editor.value) return
+  editor.value
+    .chain()
+    .focus()
+    .setHorizontalRule({ type: value, color: currentColor })
+    .run()
+  popupVisible.value = false
+}
+</script>
+
+<style lang="less" scoped>
+@import '@/assets/styles/_mixins.less';
+
+.page-divider-dropdown {
+  width: 200px;
+  .page-divider-item {
+    padding: 2px 5px;
+    cursor: pointer;
+    border-radius: var(--umo-radius);
+    &:hover {
+      background-color: var(--td-bg-color-container-hover);
+    }
+    &.open-color-picker {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 5px 6px;
+      cursor: pointer;
+      color: var(--umo-text-color-light);
+      &:hover,
+      &.active {
+        background-color: var(--td-bg-color-container-hover);
+        border-radius: var(--umo-radius);
+      }
+      .arrow {
+        .icon {
+          transform: rotate(-90deg);
+        }
+      }
+    }
+    &-title {
+      color: var(--umo-text-color-light);
+      padding: 5px 6px;
+    }
+  }
+  .umo-page-divider {
+    .page-divider();
+    margin: 3px;
+    width: auto;
+  }
+}
+:global(.page-divider-color-picker) {
+  padding: 12px;
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/insert/image.vue b/src/components_umo/menus/toolbar/insert/image.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f9905e1c27cd2b7ed120b66952d756cd75f1a792
--- /dev/null
+++ b/src/components_umo/menus/toolbar/insert/image.vue
@@ -0,0 +1,12 @@
+<template>
+  <menus-button
+    ico="image"
+    text="图片"
+    huge
+    @menu-click="editor.chain().focus().selectFiles('image').run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/insert/link.vue b/src/components_umo/menus/toolbar/insert/link.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fb9bfebb87d426bbe2b3706c0cdd9f8ce8b0521f
--- /dev/null
+++ b/src/components_umo/menus/toolbar/insert/link.vue
@@ -0,0 +1,98 @@
+<template>
+  <menus-button
+    ico="link"
+    text="链接"
+    huge
+    @menu-click="dialogVisible = true"
+  />
+  <modal
+    :visible="dialogVisible"
+    icon="link"
+    title="插入链接"
+    width="420px"
+    draggable
+    destroy-on-close
+    confirmBtn="插入"
+    @confirm="insertLink"
+    @close="dialogVisible = false"
+  >
+    <div class="link-container">
+      <t-form label-align="top">
+        <t-form-item label="链接文本：">
+          <t-input
+            v-model.trim="text"
+            :status="error.text ? 'error' : 'default'"
+            placeholder="请输入链接文本"
+            clearable
+          />
+        </t-form-item>
+        <t-form-item label="链接地址：">
+          <t-input
+            v-model="href"
+            :status="error.href ? 'error' : 'default'"
+            type="url"
+            clearable
+            placeholder="请输入链接地址，一般以 http:// 或 https:// 开头"
+          />
+        </t-form-item>
+      </t-form>
+    </div>
+  </modal>
+</template>
+
+<script setup>
+const { editor } = useStore()
+let dialogVisible = $ref(false)
+
+let text = $ref('')
+let href = $ref('')
+let error = $ref({ text: false, href: false })
+const insertLink = () => {
+  if (text === '') {
+    error.text = true
+    return
+  }
+  if (
+    !href.startsWith('http://') &&
+    !href.startsWith('https://') &&
+    !href.startsWith('ftp://') &&
+    !href.startsWith('ftps://') &&
+    !href.startsWith('mailto://')
+  ) {
+    error.href = true
+    return
+  }
+  error.text = false
+  error.href = false
+  editor.value?.commands.setLink({ href, target: '_blank' })
+  editor.value?.chain().focus().insertContent(text).run()
+  dialogVisible = false
+}
+watch(
+  () => dialogVisible,
+  (val) => {
+    if (val) {
+      text = editor.value.commands.getSelectionText()
+      href = editor.value.getAttributes('link').href || ''
+    } else {
+      text = ''
+      href = ''
+      error.text = false
+      error.href = false
+    }
+  },
+)
+</script>
+
+<style lang="less" scoped>
+.link {
+  &-container {
+    padding: 2px;
+    :deep(.umo-form__item) {
+      &:not(:last-child) {
+        margin-bottom: 10px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/insert/mathematics.vue b/src/components_umo/menus/toolbar/insert/mathematics.vue
new file mode 100644
index 0000000000000000000000000000000000000000..115e9506d5c756a73f7046458f807f8ec07a700a
--- /dev/null
+++ b/src/components_umo/menus/toolbar/insert/mathematics.vue
@@ -0,0 +1,12 @@
+<template>
+  <menus-button
+    ico="mathematics"
+    text="数学公式"
+    huge
+    @menu-click="editor.chain().focus().insertContent('$\\LaTeX$').run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/insert/special-characters.vue b/src/components_umo/menus/toolbar/insert/special-characters.vue
new file mode 100644
index 0000000000000000000000000000000000000000..56f50edad41e8cc8224f7aeb06385a9eaf5cc5b5
--- /dev/null
+++ b/src/components_umo/menus/toolbar/insert/special-characters.vue
@@ -0,0 +1,87 @@
+<template>
+  <menus-button
+    ico="special-characters"
+    text="特殊字符"
+    menu-type="popup"
+    huge
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <div class="characters-container narrow-scrollbar">
+        <template
+          v-for="(group, index) in options.dicts.specialCharacters"
+          :key="index"
+        >
+          <div class="characters-group-title">{{ group.label }}</div>
+          <div class="characters-group-container">
+            <div
+              class="characters-group-item"
+              v-for="(item, i) in group.items.split('')"
+              :key="i"
+              @click="selectCharacter(item)"
+            >
+              {{ item }}
+            </div>
+          </div>
+        </template>
+      </div>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+let { popupVisible, togglePopup } = usePopup()
+const { options, editor } = useStore()
+
+const selectCharacter = (char) => {
+  editor.value?.chain().focus().insertContent(char).run()
+  popupVisible.value = false
+}
+</script>
+
+<style lang="less" scoped>
+.characters-container {
+  width: 336px;
+  max-height: var(--umo-popup-max-height);
+  min-height: 300px;
+  overflow: auto;
+  margin: calc(var(--umo-popup-content-padding) * -1);
+  padding: calc(var(--umo-popup-content-padding) - 2px);
+}
+
+.characters-group {
+  &-title {
+    color: var(--umo-text-color-light);
+    font-size: 12px;
+    margin: 5px 0 2px 4px;
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+  &-container {
+    display: flex;
+    flex-wrap: wrap;
+    overflow: auto;
+    gap: 2px;
+  }
+  &-item {
+    flex-basis: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    line-height: 1em;
+    margin-bottom: 2px;
+    border-radius: var(--umo-radius);
+    cursor: pointer;
+    transition: background-color 0.2s;
+    font-size: 14px;
+    color: var(--umo-text-color);
+    &:hover {
+      background-color: var(--umo-button-hover-background);
+    }
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/insert/template.vue b/src/components_umo/menus/toolbar/insert/template.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ef88a97782a3d0b5532abda3acb7067f30a8c401
--- /dev/null
+++ b/src/components_umo/menus/toolbar/insert/template.vue
@@ -0,0 +1,68 @@
+<template>
+  <menus-button
+    v-if="options.templates.length > 0"
+    ico="template"
+    text="模板"
+    menu-type="dropdown"
+    huge
+    overlay-class-name="templates-dropdown"
+  >
+    <template #dropmenu>
+      <t-dropdown-menu>
+        <t-dropdown-item
+          v-for="item in options.templates"
+          :key="item.value"
+          :value="item.value"
+          :divider="item.divider"
+          :class="{
+            'has-description': item.description && item.description !== '',
+          }"
+          @click="setTemplate(item)"
+        >
+          <div class="title">{{ item.title }}</div>
+          <div
+            v-if="item.description && item.description !== ''"
+            class="description"
+          >
+            {{ item.description }}
+          </div>
+        </t-dropdown-item>
+      </t-dropdown-menu>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+const { options, editor } = useStore()
+
+const setTemplate = ({ content }) => {
+  if (!content || !editor.value) return
+  editor.value.commands.insertContent(content)
+}
+</script>
+
+<style lang="less">
+.templates-dropdown {
+  .umo-dropdown__item-text {
+    padding: 5px 5px;
+    min-width: 200px;
+    max-width: 320px;
+  }
+  .title {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+  }
+  .description {
+    color: var(--umo-text-color-light);
+    white-space: normal;
+    line-height: 1.4;
+    margin-top: 3px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/insert/text-box.vue b/src/components_umo/menus/toolbar/insert/text-box.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4fe847c574b274a0af83d52300dd250160646004
--- /dev/null
+++ b/src/components_umo/menus/toolbar/insert/text-box.vue
@@ -0,0 +1,12 @@
+<template>
+  <menus-button
+    ico="text-box"
+    text="文本框"
+    huge
+    @menu-click="editor?.chain().focus().setTextBox().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/insert/toc.vue b/src/components_umo/menus/toolbar/insert/toc.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9340ced523d8063ed9b20715a3c9c324271c0445
--- /dev/null
+++ b/src/components_umo/menus/toolbar/insert/toc.vue
@@ -0,0 +1,12 @@
+<template>
+  <menus-button
+    ico="toc"
+    text="页面大纲"
+    huge
+    @menu-click="editor?.chain().focus().addTableOfContents().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/insert/video.vue b/src/components_umo/menus/toolbar/insert/video.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fc0265048b1cfacfa29bea874c259a2e86c11723
--- /dev/null
+++ b/src/components_umo/menus/toolbar/insert/video.vue
@@ -0,0 +1,12 @@
+<template>
+  <menus-button
+    ico="video"
+    text="视频"
+    huge
+    @menu-click="editor.chain().focus().selectFiles('video').run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/insert/web-page.vue b/src/components_umo/menus/toolbar/insert/web-page.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bb2a23db0555795468444af36269381a6f578649
--- /dev/null
+++ b/src/components_umo/menus/toolbar/insert/web-page.vue
@@ -0,0 +1,79 @@
+<template>
+  <menus-button
+    ico="web-page"
+    text="网页"
+    huge
+    @menu-click="dialogVisible = true"
+  >
+    <modal
+      :visible="dialogVisible"
+      icon="web-page"
+      title="插入网页"
+      width="480px"
+      confirmBtn="插入"
+      @confirm="insertWebPage"
+      @close="dialogVisible = false"
+    >
+      <div class="web-page-container">
+        <div class="web-page-tip">某些网页可能不支持嵌入。</div>
+        <t-input
+          v-model.trim="url"
+          :status="error ? 'error' : 'default'"
+          type="url"
+          clearable
+          placeholder="请输入网页地址，以 http:// 或 https:// 开头"
+        />
+      </div>
+    </modal>
+  </menus-button>
+</template>
+
+<script setup>
+const { editor } = useStore()
+
+let dialogVisible = $ref(false)
+let url = $ref('')
+let error = $ref(false)
+
+const insertWebPage = () => {
+  if (!editor.value) return
+  if (
+    url === '' ||
+    (!url.startsWith('http://') && !url.startsWith('https://'))
+  ) {
+    error = true
+    return
+  }
+  editor.value
+    ?.chain()
+    .focus()
+    .setParagraph()
+    .setIframe({
+      src: url,
+    })
+    .run()
+  error = false
+  dialogVisible = false
+}
+watch(
+  () => dialogVisible,
+  (val) => {
+    if (!val) {
+      url = ''
+      error = false
+    }
+  },
+)
+</script>
+
+<style lang="less" scoped>
+.web-page {
+  &-container {
+    padding: 2px;
+  }
+  &-tip {
+    color: var(--umo-text-color-light);
+    margin-bottom: 10px;
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/page/background.vue b/src/components_umo/menus/toolbar/page/background.vue
new file mode 100644
index 0000000000000000000000000000000000000000..054126b04edfd831d7956af4cf1d34b2b4597ce6
--- /dev/null
+++ b/src/components_umo/menus/toolbar/page/background.vue
@@ -0,0 +1,129 @@
+<template>
+  <menus-button
+    ico="page-background"
+    text="页面背景"
+    huge
+    menu-type="popup"
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <div class="background-container">
+        <div
+          class="background-item"
+          :class="{ active: page.background === item.value }"
+          :style="{ backgroundColor: item.value }"
+          v-for="(item, index) in backgrounds"
+          :key="index"
+          @click="backgroundChange(item.value)"
+        >
+          {{ item.label }}
+        </div>
+      </div>
+      <t-popup
+        :attach="container"
+        trigger="click"
+        placement="right-bottom"
+        @visible-change="(visible) => (moreColorPicker = visible)"
+      >
+        <div class="background-more" :class="{ active: moreColorPicker }">
+          <div class="background-more-menu">
+            <icon name="palette-color" />
+            <span>自定义页面背景</span>
+          </div>
+          <div class="background-more-arrow">
+            <icon name="arrow-down" />
+          </div>
+        </div>
+        <template #content>
+          <t-color-picker-panel
+            size="small"
+            :color-modes="['monochrome']"
+            :swatch-colors="[]"
+            enable-alpha
+            @change="backgroundChange"
+          />
+        </template>
+      </t-popup>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+let { popupVisible, togglePopup } = usePopup()
+const { container, page } = useStore()
+
+const backgrounds = [
+  { label: '默认', value: page.value.defaultBackground },
+  { label: '护眼绿', value: 'rgb(233, 246, 227)' },
+  { label: '淡雅黄', value: 'rgb(252, 242, 224)' },
+  { label: '云水蓝', value: 'rgb(237, 244, 255)' },
+  { label: '天空蓝', value: 'rgb(153, 205, 250)' },
+  { label: '暗夜黑', value: 'rgb(145, 145, 145)' },
+]
+
+// 更多颜色
+const moreColorPicker = $ref(false)
+const backgroundChange = (color) => {
+  page.value.background = color
+}
+</script>
+
+<style lang="less" scoped>
+.background-container {
+  display: flex;
+  flex-wrap: wrap;
+  width: 234px;
+  justify-content: space-between;
+  gap: 9px;
+  user-select: none;
+  .background-item {
+    width: 70px;
+    height: 90px;
+    border: solid 1px rgba(0, 0, 0, 0.1);
+    border-radius: var(--umo-radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    color: var(--umo-text-color-light);
+    cursor: pointer;
+    &:hover {
+      border-color: rgba(0, 0, 0, 0.2);
+      transform: scale(1.02);
+    }
+    &.active {
+      color: var(--umo-primary-color);
+      border-color: var(--umo-primary-color);
+    }
+  }
+}
+.background-more {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px;
+  cursor: pointer;
+  margin-top: 10px;
+  &:hover,
+  &.active {
+    background-color: var(--td-bg-color-container-hover);
+    border-radius: var(--umo-radius);
+  }
+  &-menu {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    cursor: pointer;
+    .icon {
+      margin-right: 5px;
+      font-size: 16px;
+    }
+  }
+  &-arrow {
+    .icon {
+      transform: rotate(-90deg);
+    }
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/page/break-marks.vue b/src/components_umo/menus/toolbar/page/break-marks.vue
new file mode 100644
index 0000000000000000000000000000000000000000..226fa1047818e88d47b7e77e769e85d0caa01e90
--- /dev/null
+++ b/src/components_umo/menus/toolbar/page/break-marks.vue
@@ -0,0 +1,22 @@
+<template>
+  <menus-button
+    ico="break-marks"
+    text="显示换行"
+    huge
+    :menu-active="page.showBreakMarks"
+    @menu-click="toggleInvisibleCharacters"
+  />
+</template>
+
+<script setup>
+const { page, editor } = useStore()
+
+const toggleInvisibleCharacters = () => {
+  page.value.showBreakMarks = !page.value.showBreakMarks
+  if (page.value.showBreakMarks) {
+    editor.value.commands.showInvisibleCharacters()
+  } else {
+    editor.value.commands.hideInvisibleCharacters()
+  }
+}
+</script>
diff --git a/src/components_umo/menus/toolbar/page/break.vue b/src/components_umo/menus/toolbar/page/break.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b7729a012806b523e3bb5c677138b0e5880f2a52
--- /dev/null
+++ b/src/components_umo/menus/toolbar/page/break.vue
@@ -0,0 +1,17 @@
+<template>
+  <menus-button
+    ico="page-break"
+    text="插入分页"
+    shortcut="Ctrl+Enter"
+    huge
+    @menu-click="setPageBreak"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+
+const setPageBreak = () => {
+  editor.value?.chain().focus().setPageBreak().run()
+}
+</script>
diff --git a/src/components_umo/menus/toolbar/page/footer.vue b/src/components_umo/menus/toolbar/page/footer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..90a75ac8bfb9c37ff7d779b1396b5acb68f07cec
--- /dev/null
+++ b/src/components_umo/menus/toolbar/page/footer.vue
@@ -0,0 +1,5 @@
+<template>
+  <menus-button ico="page-footer" text="页脚" huge />
+</template>
+
+<script setup></script>
diff --git a/src/components_umo/menus/toolbar/page/header.vue b/src/components_umo/menus/toolbar/page/header.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0d3d5c89d45243375dda3f5a588c6da1cffaaf0a
--- /dev/null
+++ b/src/components_umo/menus/toolbar/page/header.vue
@@ -0,0 +1,5 @@
+<template>
+  <menus-button ico="page-header" text="页眉" huge />
+</template>
+
+<script setup></script>
diff --git a/src/components_umo/menus/toolbar/page/line-number.vue b/src/components_umo/menus/toolbar/page/line-number.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dda0e212a12b41448e2a4c12680e2be0e49423af
--- /dev/null
+++ b/src/components_umo/menus/toolbar/page/line-number.vue
@@ -0,0 +1,13 @@
+<template>
+  <menus-button
+    ico="line-number"
+    text="显示行号"
+    :menu-active="page.showLineNumber"
+    huge
+    @menu-click="page.showLineNumber = !page.showLineNumber"
+  />
+</template>
+
+<script setup>
+const { page } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/page/margin.vue b/src/components_umo/menus/toolbar/page/margin.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8b17bb9954510d2ca51dc32de4a44ce95f582d33
--- /dev/null
+++ b/src/components_umo/menus/toolbar/page/margin.vue
@@ -0,0 +1,14 @@
+<template>
+  <menus-button
+    ico="page-margin"
+    text="页边距"
+    huge
+    @menu-click="dialogVisible = true"
+  >
+    <page-options :visible="dialogVisible" @close="dialogVisible = false" />
+  </menus-button>
+</template>
+
+<script setup>
+let dialogVisible = $ref(false)
+</script>
diff --git a/src/components_umo/menus/toolbar/page/orientation.vue b/src/components_umo/menus/toolbar/page/orientation.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f3e5eb8a9294bdd4f465be5df73a84dffc9486fe
--- /dev/null
+++ b/src/components_umo/menus/toolbar/page/orientation.vue
@@ -0,0 +1,57 @@
+<template>
+  <menus-button
+    ico="page-orientation"
+    text="页面方向"
+    menu-type="dropdown"
+    overlay-class-name="page-orientation-dropdown"
+  >
+    <template #dropmenu>
+      <t-dropdown-menu>
+        <t-dropdown-item
+          v-for="(item, index) in orientations"
+          :key="index"
+          :value="item.value"
+          :active="page.orientation === item.value"
+          @click="page.orientation = item.value"
+        >
+          <div class="icon" :class="{ rotate: item.value === 'vertical' }">
+            <icon name="page" />
+          </div>
+          <div class="label">{{ item.label }}</div>
+        </t-dropdown-item>
+      </t-dropdown-menu>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+const { page } = useStore()
+
+const orientations = [
+  { label: '横向', value: 'horizontal' },
+  { label: '纵向', value: 'vertical' },
+]
+</script>
+
+<style lang="less">
+.page-orientation-dropdown {
+  .umo-dropdown__item {
+    max-width: unset !important;
+    &-text {
+      display: flex;
+      padding: 5px 8px;
+      .icon {
+        font-size: 20px;
+        margin-right: 5px;
+        &.rotate {
+          transform: rotate(90deg) rotateY(180deg) translate(3px, 3px);
+        }
+      }
+      .label {
+        font-size: 14px;
+        color: var(--umo-text-color);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/page/preview.vue b/src/components_umo/menus/toolbar/page/preview.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3effc8927b9dd5715786994384d3798f41c53ec6
--- /dev/null
+++ b/src/components_umo/menus/toolbar/page/preview.vue
@@ -0,0 +1,14 @@
+<template>
+  <menus-button
+    ico="preview"
+    text="演示模式"
+    shortcut="F5"
+    huge
+    :menu-active="page.preview.enabled"
+    @menu-click="page.preview.enabled = !page.preview.enabled"
+  />
+</template>
+
+<script setup>
+const { page } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/page/size.vue b/src/components_umo/menus/toolbar/page/size.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3d51d64fcabb76b95299eaec60ea66c85802f1e4
--- /dev/null
+++ b/src/components_umo/menus/toolbar/page/size.vue
@@ -0,0 +1,55 @@
+<template>
+  <menus-button
+    ico="page-size"
+    text="页面大小"
+    menu-type="dropdown"
+    overlay-class-name="page-size-dropdown"
+  >
+    <template #dropmenu>
+      <t-dropdown-menu>
+        <t-dropdown-item
+          v-for="(item, index) in options.dicts.pageSizes"
+          :key="index"
+          :value="index"
+          :active="page.size.width === item.width"
+          :divider="options.dicts.pageSizes.length - 1 === index"
+          :min-column-width="150"
+          @click="page.size = item"
+        >
+          <div class="label">{{ item.label }}</div>
+          <div class="desc">{{ item.width }}厘米 × {{ item.height }}厘米</div>
+        </t-dropdown-item>
+        <t-dropdown-item @click="dialogVisible = true">
+          <div class="label">自定义设置</div>
+        </t-dropdown-item>
+      </t-dropdown-menu>
+    </template>
+    <page-options :visible="dialogVisible" @close="dialogVisible = false" />
+  </menus-button>
+</template>
+
+<script setup>
+const { options, page } = useStore()
+let dialogVisible = $ref(false)
+</script>
+
+<style lang="less">
+.page-size-dropdown {
+  .umo-dropdown__item {
+    max-width: unset !important;
+    &-text {
+      padding: 3px;
+      .label {
+        font-size: 14px;
+        color: var(--umo-text-color);
+      }
+      .desc {
+        color: var(--umo-text-color-light);
+        margin-top: -3px;
+        text-transform: uppercase;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/page/toggle-toc.vue b/src/components_umo/menus/toolbar/page/toggle-toc.vue
new file mode 100644
index 0000000000000000000000000000000000000000..61b9805b38798268e369b4f6d4cf4f47d6072407
--- /dev/null
+++ b/src/components_umo/menus/toolbar/page/toggle-toc.vue
@@ -0,0 +1,13 @@
+<template>
+  <menus-button
+    ico="toc"
+    text="显示大纲"
+    huge
+    :menu-active="page.showToc"
+    @menu-click="page.showToc = !page.showToc"
+  />
+</template>
+
+<script setup>
+const { page } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/page/watermark.vue b/src/components_umo/menus/toolbar/page/watermark.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1ca5db125673fda80ee0de94963db427f28cad9f
--- /dev/null
+++ b/src/components_umo/menus/toolbar/page/watermark.vue
@@ -0,0 +1,162 @@
+<template>
+  <menus-button
+    ico="watermark"
+    text="页面水印"
+    huge
+    menu-type="popup"
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <div class="watermark-container">
+        <div class="watermark-toolbar">
+          <menus-button
+            style="width: 140px"
+            tooltip="水印文字字体"
+            menu-type="select"
+            :select-options="options.dicts.fonts"
+            :value="page.watermark.fontFamily"
+            @menu-click="(value) => (page.watermark.fontFamily = value)"
+          ></menus-button>
+          <menus-button menu-type="input" tooltip="水印文字大小">
+            <t-input-number
+              v-model="page.watermark.fontSize"
+              style="width: 60px"
+              size="small"
+              theme="column"
+              align="center"
+              :max="96"
+              :min="12"
+              :allow-input-over-limit="false"
+              placeholder=""
+            >
+            </t-input-number>
+          </menus-button>
+          <menus-toolbar-base-bold
+            :menu-active="page.watermark.fontWeight === 'bold'"
+            @menu-click-through="
+              page.watermark.fontWeight === 'bold'
+                ? (page.watermark.fontWeight = 'normal')
+                : (page.watermark.fontWeight = 'bold')
+            "
+          />
+          <menus-toolbar-base-color
+            text="水印文字颜色"
+            :default-color="page.watermark.fontColor"
+            modeless
+            @change="(value) => (page.watermark.fontColor = value)"
+          />
+        </div>
+        <t-input
+          v-model.trim="page.watermark.text"
+          maxlength="30"
+          clearable
+          placeholder="水印文字内容"
+        />
+        <div class="watermark-type-title">水印类型</div>
+        <div class="watermark-type">
+          <div
+            class="item compact"
+            :class="{ active: page.watermark.type === 'compact' }"
+            @click="page.watermark.type = 'compact'"
+          >
+            <div class="bg"></div>
+            <span>紧凑型</span>
+          </div>
+          <div
+            class="item spacious"
+            :class="{ active: page.watermark.type === 'spacious' }"
+            @click="page.watermark.type = 'spacious'"
+          >
+            <div class="bg"></div>
+            <span>宽松型</span>
+          </div>
+        </div>
+        <t-button
+          class="clear-button"
+          v-if="page.watermark.text !== ''"
+          block
+          variant="outline"
+          @click="clearWatermark"
+          >清除水印</t-button
+        >
+      </div>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+let { popupVisible, togglePopup } = usePopup()
+
+const { options, page } = useStore()
+
+const clearWatermark = () => {
+  page.value.watermark.text = ''
+  popupVisible.value = false
+}
+</script>
+
+<style lang="less" scoped>
+.watermark-container {
+  width: 320px;
+  .watermark-switch {
+    margin-bottom: 15px;
+  }
+  .watermark-toolbar {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  .watermark-type {
+    display: flex;
+    &-title {
+      color: var(--umo-text-color-light);
+      margin: 10px 0;
+      font-size: 12px;
+    }
+    .item {
+      cursor: pointer;
+      &:first-child {
+        margin-right: 10px;
+      }
+      .bg {
+        width: 70px;
+        height: 90px;
+        border: solid 1px var(--umo-border-color);
+        position: relative;
+        border-radius: var(--umo-radius);
+        background-size: cover;
+        background-position: center center;
+        background-repeat: no-repeat;
+      }
+      span {
+        display: block;
+        background-color: rgba(0, 0, 0, 0.05);
+        border-radius: 12px;
+        padding: 0 10px;
+        text-align: center;
+        margin-top: 8px;
+        font-size: 12px;
+      }
+      &:hover,
+      &.active {
+        .bg {
+          border-color: var(--umo-primary-color);
+        }
+        span {
+          color: var(--umo-primary-color);
+        }
+      }
+      &.compact .bg {
+        background-image: url('@/assets/images/watermark-compact.png');
+      }
+      &.spacious .bg {
+        background-image: url('@/assets/images/watermark-spacious.png');
+      }
+    }
+  }
+  .clear-button {
+    margin-top: 20px;
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/table/add-column-after.vue b/src/components_umo/menus/toolbar/table/add-column-after.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e2513bf62d877856f6e53c69f8f2e1fe85697db5
--- /dev/null
+++ b/src/components_umo/menus/toolbar/table/add-column-after.vue
@@ -0,0 +1,14 @@
+<template>
+  <menus-button
+    ico="table-add-column-after"
+    text="插入列(右)"
+    :hide-text="$toolbar.mode === 'classic'"
+    :disabled="!editor?.can().addColumnAfter()"
+    @menu-click="editor?.chain().focus().addColumnAfter().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+const $toolbar = useState('toolbar')
+</script>
diff --git a/src/components_umo/menus/toolbar/table/add-column-before.vue b/src/components_umo/menus/toolbar/table/add-column-before.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a96a47f079a5ab8a4b0ce07d068de81c5780ba0c
--- /dev/null
+++ b/src/components_umo/menus/toolbar/table/add-column-before.vue
@@ -0,0 +1,14 @@
+<template>
+  <menus-button
+    ico="table-add-column-before"
+    text="插入列(左)"
+    :hide-text="$toolbar.mode === 'classic'"
+    :disabled="!editor?.can().addColumnBefore()"
+    @menu-click="editor?.chain().focus().addColumnBefore().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+const $toolbar = useState('toolbar')
+</script>
diff --git a/src/components_umo/menus/toolbar/table/add-row-after.vue b/src/components_umo/menus/toolbar/table/add-row-after.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9feb41e89efb446d7a1c747b00e45840531d4e20
--- /dev/null
+++ b/src/components_umo/menus/toolbar/table/add-row-after.vue
@@ -0,0 +1,14 @@
+<template>
+  <menus-button
+    ico="table-add-row-after"
+    text="插入行(后)"
+    :hide-text="$toolbar.mode === 'classic'"
+    :disabled="!editor?.can().addRowAfter()"
+    @menu-click="editor?.chain().focus().addRowAfter().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+const $toolbar = useState('toolbar')
+</script>
diff --git a/src/components_umo/menus/toolbar/table/add-row-before.vue b/src/components_umo/menus/toolbar/table/add-row-before.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e73beb93e979918bf8871cc6f8edacec50fe9205
--- /dev/null
+++ b/src/components_umo/menus/toolbar/table/add-row-before.vue
@@ -0,0 +1,14 @@
+<template>
+  <menus-button
+    ico="table-add-row-after"
+    text="插入行(前)"
+    :hide-text="$toolbar.mode === 'classic'"
+    :disabled="!editor?.can().addRowBefore()"
+    @menu-click="editor?.chain().focus().addRowBefore().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+const $toolbar = useState('toolbar')
+</script>
diff --git a/src/components_umo/menus/toolbar/table/border-color.vue b/src/components_umo/menus/toolbar/table/border-color.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0be8b037bc96788a64ca9d9f809af92d9ace4351
--- /dev/null
+++ b/src/components_umo/menus/toolbar/table/border-color.vue
@@ -0,0 +1,32 @@
+<template>
+  <menus-button
+    ico="table"
+    text="表格边框颜色"
+    menu-type="popup"
+    huge
+    :disabled="!editor?.can().setCellAttribute('borderColor')"
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <color-picker default-color="" @change="colorBorderChange" />
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+const emits = defineEmits(['change'])
+
+let { popupVisible, togglePopup } = usePopup()
+const { editor } = useStore()
+
+const colorBorderChange = (color) => {
+  popupVisible.value = false
+  const borderColor = color === '' ? null : color
+  editor.value
+    ?.chain()
+    .focus()
+    .setCellAttribute('borderColor', borderColor)
+    .run()
+}
+</script>
diff --git a/src/components_umo/menus/toolbar/table/cells-align.vue b/src/components_umo/menus/toolbar/table/cells-align.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7c8b580d9318261f0008c4177a4d1619b1bbf5df
--- /dev/null
+++ b/src/components_umo/menus/toolbar/table/cells-align.vue
@@ -0,0 +1,35 @@
+<template>
+  <menus-button
+    ico="table-cells-align"
+    text="对齐方式"
+    tooltip="单元格对齐方式"
+    menu-type="dropdown"
+    huge
+    :select-options="alignments"
+    :disabled="!editor?.can().setCellAttribute('align')"
+    @change="setCellsAlign"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+
+const alignments = [
+  { content: '靠上左对齐', value: 'left-top' },
+  { content: '靠上居中对齐', value: 'center-top' },
+  { content: '靠上右对齐', value: 'right-top' },
+  { content: '靠上两端对齐', value: 'justify-top', divider: true },
+  { content: '中间左对齐', value: 'left-middle' },
+  { content: '中间对齐', value: 'center-middle' },
+  { content: '中间右对齐', value: 'right-middle' },
+  { content: '中间两端对齐', value: 'justify-middle', divider: true },
+  { content: '靠下左对齐', value: 'left-bottom' },
+  { content: '靠下居中对齐', value: 'center-bottom' },
+  { content: '靠下右对齐', value: 'right-bottom' },
+  { content: '靠下两端对齐', value: 'justify-bottom' },
+]
+
+const setCellsAlign = ({ value }) => {
+  editor.value?.chain().focus().setCellAttribute('align', value).run()
+}
+</script>
diff --git a/src/components_umo/menus/toolbar/table/cells-background.vue b/src/components_umo/menus/toolbar/table/cells-background.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7c00d7797ca88cc2d06f5271d3be46a65741bb90
--- /dev/null
+++ b/src/components_umo/menus/toolbar/table/cells-background.vue
@@ -0,0 +1,33 @@
+<template>
+  <menus-button
+    ico="table-cells-background"
+    text="背景颜色"
+    tooltip="单元格背景颜色"
+    menu-type="popup"
+    huge
+    :disabled="!editor?.can().setCellAttribute('backgroundColor')"
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <color-picker default-color="" @change="colorChange" />
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+const emits = defineEmits(['change'])
+
+let { popupVisible, togglePopup } = usePopup()
+const { editor } = useStore()
+
+const colorChange = (color) => {
+  popupVisible.value = false
+  const backgroundColor = color === '' ? null : color
+  editor.value
+    ?.chain()
+    .focus()
+    .setCellAttribute('backgroundColor', backgroundColor)
+    .run()
+}
+</script>
diff --git a/src/components_umo/menus/toolbar/table/delete-column.vue b/src/components_umo/menus/toolbar/table/delete-column.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fd4a2805795262f37b294f8a69c464ac9ab4eb85
--- /dev/null
+++ b/src/components_umo/menus/toolbar/table/delete-column.vue
@@ -0,0 +1,31 @@
+<template>
+  <menus-button
+    ico="table-delete-column"
+    text="删除列"
+    :hide-text="$toolbar.mode === 'classic'"
+    :disabled="!editor?.can().deleteColumn()"
+    @menu-click="deleteColumn"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+const $toolbar = useState('toolbar')
+
+const deleteColumn = () => {
+  const dialog = useConfirm({
+    theme: 'danger',
+    header: '信息提醒',
+    body: '此操作会删除当前选中的表格列，是否继续？',
+    confirmBtn: {
+      theme: 'danger',
+      content: '删除',
+    },
+    onConfirm() {
+      editor.value?.chain().focus().deleteColumn().run()
+      useMessage('success', '删除成功')
+      dialog.destroy()
+    },
+  })
+}
+</script>
diff --git a/src/components_umo/menus/toolbar/table/delete-row.vue b/src/components_umo/menus/toolbar/table/delete-row.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d479c4297efa0abf65c8795b635470199a7624b0
--- /dev/null
+++ b/src/components_umo/menus/toolbar/table/delete-row.vue
@@ -0,0 +1,31 @@
+<template>
+  <menus-button
+    ico="table-delete-row"
+    text="删除行"
+    :hide-text="$toolbar.mode === 'classic'"
+    :disabled="!editor?.can().deleteRow()"
+    @menu-click="deleteRow"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+const $toolbar = useState('toolbar')
+
+const deleteRow = () => {
+  const dialog = useConfirm({
+    theme: 'danger',
+    header: '信息提醒',
+    body: '此操作会删除当前选中的表格行，是否继续？',
+    confirmBtn: {
+      theme: 'danger',
+      content: '删除',
+    },
+    onConfirm() {
+      editor.value?.chain().focus().deleteRow().run()
+      useMessage('success', '删除成功')
+      dialog.destroy()
+    },
+  })
+}
+</script>
diff --git a/src/components_umo/menus/toolbar/table/delete.vue b/src/components_umo/menus/toolbar/table/delete.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5a17398fc5aefcefcf320be318fdd4b161ce2731
--- /dev/null
+++ b/src/components_umo/menus/toolbar/table/delete.vue
@@ -0,0 +1,31 @@
+<template>
+  <menus-button
+    ico="table-delete"
+    text="删除"
+    tooltip="删除当前表格"
+    huge
+    :disabled="!editor?.can().deleteTable()"
+    @menu-click="deleteTable"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+
+const deleteTable = () => {
+  const dialog = useConfirm({
+    theme: 'danger',
+    header: '信息提醒',
+    body: '此操作会删除当前选中的表格，是否继续？',
+    confirmBtn: {
+      theme: 'danger',
+      content: '删除',
+    },
+    onConfirm() {
+      editor.value?.chain().focus().deleteTable().run()
+      useMessage('success', '删除成功')
+      dialog.destroy()
+    },
+  })
+}
+</script>
diff --git a/src/components_umo/menus/toolbar/table/fix.vue b/src/components_umo/menus/toolbar/table/fix.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0c3a330f7e10b51bda3d094dc2ecfa95f432b9f6
--- /dev/null
+++ b/src/components_umo/menus/toolbar/table/fix.vue
@@ -0,0 +1,14 @@
+<template>
+  <menus-button
+    ico="table-fix"
+    text="修复"
+    tooltip="当表格有错乱时，点击此按钮可自动修复表格"
+    huge
+    :disabled="!editor?.can().fixTables()"
+    @menu-click="editor?.chain().focus().fixTables().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+</script>
diff --git a/src/components_umo/menus/toolbar/table/insert.vue b/src/components_umo/menus/toolbar/table/insert.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d98d64910aa5a82f1d786134764c61e5c95e824e
--- /dev/null
+++ b/src/components_umo/menus/toolbar/table/insert.vue
@@ -0,0 +1,125 @@
+<template>
+  <menus-button
+    ico="table"
+    text="插入"
+    tooltip="插入新表格"
+    menu-type="popup"
+    huge
+    :popup-visible="popupVisible"
+    @toggle-popup="togglePopup"
+  >
+    <template #content>
+      <div class="table-grid" @mouseleave="resetTable">
+        <div v-for="(row, rowIndex) in table" :key="rowIndex" class="row">
+          <div
+            v-for="(cell, colIndex) in row"
+            :key="colIndex"
+            class="cell"
+            :class="{ selected: isSelected(rowIndex, colIndex) }"
+            @mouseover="selectCell(rowIndex, colIndex)"
+            @click="insertTable"
+          ></div>
+        </div>
+      </div>
+      <div class="table-custom">
+        <div class="table-custom-title">表格属性</div>
+        <t-input-number
+          v-model="selected.rows"
+          theme="column"
+          :max="1000"
+          :min="0"
+          label="行数:"
+        />
+        <t-input-number
+          v-model="selected.cols"
+          theme="column"
+          :max="30"
+          :min="0"
+          label="列数:"
+        />
+        <t-checkbox v-model="withHeaderRow">包含表头</t-checkbox>
+        <t-button
+          class="insert-button"
+          block
+          theme="primary"
+          variant="base"
+          @click="insertTable"
+        >
+          创建表格
+        </t-button>
+      </div>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+let { popupVisible, togglePopup } = usePopup()
+const { editor } = useStore()
+
+const table = Array.from({ length: 8 }, () =>
+  Array.from({ length: 10 }, () => ''),
+)
+let selected = $ref({ rows: 0, cols: 0 })
+let withHeaderRow = $ref(true)
+
+const isSelected = (rows, cols) => {
+  return (
+    selected.rows &&
+    selected.rows > rows &&
+    selected.cols &&
+    selected.cols > cols
+  )
+}
+const selectCell = (rows, cols) => {
+  selected.rows = rows + 1
+  selected.cols = cols + 1
+}
+const resetTable = () => {
+  selected.rows = 0
+  selected.cols = 0
+}
+const insertTable = () => {
+  const { rows, cols } = selected
+  if (rows === 0 || rows > 1000 || cols === 0 || cols > 30) {
+    return
+  }
+  editor.value?.chain().focus().insertTable({ rows, cols, withHeaderRow }).run()
+  popupVisible.value = false
+}
+</script>
+
+<style lang="less" scoped>
+.table-grid {
+  .row {
+    display: flex;
+    gap: 4px;
+  }
+  .cell {
+    width: 14px;
+    height: 14px;
+    border: 1px solid var(--umo-border-color);
+    cursor: pointer;
+    margin-bottom: 4px;
+    &.selected {
+      border-color: var(--umo-primary-color);
+      background-color: rgba(0, 0, 0, 0.03);
+    }
+  }
+}
+
+.table-custom {
+  :deep(.umo-input-number) {
+    width: 196px;
+    display: block;
+    margin-bottom: 8px;
+  }
+  &-title {
+    color: var(--umo-text-color-light);
+    font-size: 12px;
+    margin: 8px 0 2px;
+  }
+  .insert-button {
+    margin-top: 5px;
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/table/merge-cells.vue b/src/components_umo/menus/toolbar/table/merge-cells.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1c5622148f9d08bffdb708c9f0c52a6883a116a8
--- /dev/null
+++ b/src/components_umo/menus/toolbar/table/merge-cells.vue
@@ -0,0 +1,14 @@
+<template>
+  <menus-button
+    ico="table-merge-cell"
+    text="合并单元格"
+    :hide-text="$toolbar.mode === 'classic'"
+    :disabled="!editor?.can().mergeCells()"
+    @menu-click="editor?.chain().focus().mergeCells().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+const $toolbar = useState('toolbar')
+</script>
diff --git a/src/components_umo/menus/toolbar/table/next-cell.vue b/src/components_umo/menus/toolbar/table/next-cell.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d00e48990856e90742413208b3fde42ed876eed5
--- /dev/null
+++ b/src/components_umo/menus/toolbar/table/next-cell.vue
@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    ico="table-next-cell"
+    text="下一个单元格"
+    shortcut="Tab"
+    :hide-text="$toolbar.mode === 'classic'"
+    :disabled="!editor?.can().goToNextCell()"
+    @menu-click="editor?.chain().focus().goToNextCell().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+const $toolbar = useState('toolbar')
+</script>
diff --git a/src/components_umo/menus/toolbar/table/previous-cell.vue b/src/components_umo/menus/toolbar/table/previous-cell.vue
new file mode 100644
index 0000000000000000000000000000000000000000..947f6a88ec25c6c095dea5482d6a6f7f6d7aba50
--- /dev/null
+++ b/src/components_umo/menus/toolbar/table/previous-cell.vue
@@ -0,0 +1,15 @@
+<template>
+  <menus-button
+    ico="table-previous-cell"
+    text="上一个单元格"
+    shortcut="Shift+Tab"
+    :hide-text="$toolbar.mode === 'classic'"
+    :disabled="!editor?.can().goToPreviousCell()"
+    @menu-click="editor?.chain().focus().goToPreviousCell().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+const $toolbar = useState('toolbar')
+</script>
diff --git a/src/components_umo/menus/toolbar/table/split-cell.vue b/src/components_umo/menus/toolbar/table/split-cell.vue
new file mode 100644
index 0000000000000000000000000000000000000000..26d748c680502c6858f254217c2ad0da79b20e78
--- /dev/null
+++ b/src/components_umo/menus/toolbar/table/split-cell.vue
@@ -0,0 +1,14 @@
+<template>
+  <menus-button
+    ico="table-split-cell"
+    text="拆分单元格"
+    :hide-text="$toolbar.mode === 'classic'"
+    :disabled="!editor?.can().splitCell()"
+    @menu-click="editor?.chain().focus().splitCell().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+const $toolbar = useState('toolbar')
+</script>
diff --git a/src/components_umo/menus/toolbar/table/toggle-header-cell.vue b/src/components_umo/menus/toolbar/table/toggle-header-cell.vue
new file mode 100644
index 0000000000000000000000000000000000000000..be586f0f55727bf659e0c6d1d115f6310fb08f75
--- /dev/null
+++ b/src/components_umo/menus/toolbar/table/toggle-header-cell.vue
@@ -0,0 +1,14 @@
+<template>
+  <menus-button
+    ico="table-header-cell"
+    text="切换表头单元格"
+    :hide-text="$toolbar.mode === 'classic'"
+    :disabled="!editor?.can().toggleHeaderCell()"
+    @menu-click="editor?.chain().focus().toggleHeaderCell().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+const $toolbar = useState('toolbar')
+</script>
diff --git a/src/components_umo/menus/toolbar/table/toggle-header-column.vue b/src/components_umo/menus/toolbar/table/toggle-header-column.vue
new file mode 100644
index 0000000000000000000000000000000000000000..92ef4b87b668a4d92d5460981f873d9fd4a382a2
--- /dev/null
+++ b/src/components_umo/menus/toolbar/table/toggle-header-column.vue
@@ -0,0 +1,14 @@
+<template>
+  <menus-button
+    ico="table-header-column"
+    text="切换表头列"
+    :hide-text="$toolbar.mode === 'classic'"
+    :disabled="!editor?.can().toggleHeaderColumn()"
+    @menu-click="editor?.chain().focus().toggleHeaderColumn().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+const $toolbar = useState('toolbar')
+</script>
diff --git a/src/components_umo/menus/toolbar/table/toggle-header-row.vue b/src/components_umo/menus/toolbar/table/toggle-header-row.vue
new file mode 100644
index 0000000000000000000000000000000000000000..554283824d7019cdbbc6f00a42f47e118047be6c
--- /dev/null
+++ b/src/components_umo/menus/toolbar/table/toggle-header-row.vue
@@ -0,0 +1,14 @@
+<template>
+  <menus-button
+    ico="table-header-row"
+    text="切换表头行"
+    :hide-text="$toolbar.mode === 'classic'"
+    :disabled="!editor?.can().toggleHeaderRow()"
+    @menu-click="editor?.chain().focus().toggleHeaderRow().run()"
+  />
+</template>
+
+<script setup>
+const { editor } = useStore()
+const $toolbar = useState('toolbar')
+</script>
diff --git a/src/components_umo/menus/toolbar/tools/barcode.vue b/src/components_umo/menus/toolbar/tools/barcode.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cfdd8ec7945508a4c941322127e46baab05a6eea
--- /dev/null
+++ b/src/components_umo/menus/toolbar/tools/barcode.vue
@@ -0,0 +1,406 @@
+<template>
+  <menus-button
+    :ico="content ? 'edit' : 'barcode'"
+    :text="content ? '编辑' : '条形码'"
+    huge
+    @menu-click="dialogVisible = true"
+  >
+    <modal
+      :visible="dialogVisible"
+      icon="barcode"
+      title="条形码生成"
+      width="720px"
+      @confirm="setBarcode"
+      @close="dialogVisible = false"
+    >
+      <div class="barcode-container">
+        <div class="barcode-toolbar">
+          <menus-button
+            style="width: 126px"
+            text="条形码标准"
+            :select-options="formats"
+            menu-type="select"
+            :value="config.format"
+            @menu-click="(value) => (config.format = value)"
+          ></menus-button>
+          <t-divider layout="vertical" />
+          <menus-button
+            style="width: 114px"
+            text="文字字体"
+            :select-options="options.dicts.fonts"
+            menu-type="select"
+            :value="config.font"
+            @menu-click="(value) => (config.font = value)"
+          ></menus-button>
+          <t-divider layout="vertical" />
+          <menus-toolbar-base-color
+            text="条形码及文字颜色"
+            :default-color="config.lineColor"
+            modeless
+            @change="(value) => (config.lineColor = value)"
+          />
+          <menus-toolbar-base-background-color
+            text="条形码背景颜色"
+            :default-color="config.background"
+            modeless
+            @change="(value) => (config.background = value)"
+          />
+          <t-divider layout="vertical" />
+          <menus-toolbar-base-bold
+            :menu-active="config.fontOptions.includes('bold')"
+            @menu-click-through="changeFontOptions('bold')"
+          />
+          <menus-toolbar-base-italic
+            :menu-active="config.fontOptions.includes('italic')"
+            @menu-click-through="changeFontOptions('italic')"
+          />
+          <t-divider layout="vertical" />
+          <menus-toolbar-base-align-left
+            :menu-active="config.textAlign === 'left'"
+            @menu-click-through="config.textAlign = 'left'"
+          />
+          <menus-toolbar-base-align-center
+            :menu-active="config.textAlign === 'center'"
+            @menu-click-through="config.textAlign = 'center'"
+          />
+          <menus-toolbar-base-align-right
+            :menu-active="config.textAlign === 'right'"
+            @menu-click-through="config.textAlign = 'right'"
+          />
+          <t-divider layout="vertical" />
+          <menus-button
+            text="更多"
+            menu-type="popup"
+            :popup-visible="popupVisible"
+            @toggle-popup="togglePopup"
+          >
+            <icon name="setting" />
+            <template #content>
+              <div class="barcode-toolbar-more">
+                <t-form size="small" label-align="left">
+                  <t-form-item label="单个条形的宽度：">
+                    <t-slider
+                      v-model="config.width"
+                      :min="1"
+                      :max="4"
+                      :step="1"
+                      :tooltip-props="{
+                        showArrow: false,
+                        theme: 'light',
+                      }"
+                    />
+                  </t-form-item>
+                  <t-form-item label="条形码的高度：">
+                    <t-slider
+                      v-model="config.height"
+                      :min="10"
+                      :max="200"
+                      :step="1"
+                      :tooltip-props="{
+                        showArrow: false,
+                        theme: 'light',
+                      }"
+                    />
+                  </t-form-item>
+                  <t-form-item label="条形码四周留白：">
+                    <t-slider
+                      v-model="config.margin"
+                      :min="0"
+                      :max="25"
+                      :step="1"
+                      :tooltip-props="{
+                        showArrow: false,
+                        theme: 'light',
+                      }"
+                    />
+                  </t-form-item>
+                  <t-divider></t-divider>
+                  <t-form-item label="是否显示文字：">
+                    <t-checkbox v-model="config.displayValue"
+                      >显示文字</t-checkbox
+                    >
+                  </t-form-item>
+                  <t-form-item
+                    label="文字内容："
+                    help="填写后会覆盖条形码内容文本"
+                  >
+                    <t-textarea
+                      v-model="config.text"
+                      autosize
+                      maxlength="100"
+                    />
+                  </t-form-item>
+                  <t-form-item label="文字所在位置：">
+                    <t-select
+                      v-model="config.textPosition"
+                      :options="textPositions"
+                      :popup-props="{
+                        destroyOnClose: true,
+                        attach: container,
+                      }"
+                    >
+                    </t-select>
+                  </t-form-item>
+                  <t-form-item label="文字上下距离：">
+                    <t-slider
+                      v-model="config.textMargin"
+                      :min="-15"
+                      :max="40"
+                      :step="1"
+                      :tooltip-props="{
+                        showArrow: false,
+                        theme: 'light',
+                      }"
+                    />
+                  </t-form-item>
+                  <t-form-item label="文字字体大小：">
+                    <t-slider
+                      v-model="config.fontSize"
+                      :min="8"
+                      :max="36"
+                      :step="1"
+                      :tooltip-props="{
+                        showArrow: false,
+                        theme: 'light',
+                      }"
+                    />
+                  </t-form-item>
+                </t-form>
+              </div>
+            </template>
+          </menus-button>
+        </div>
+        <div class="barcode-code">
+          <t-input
+            v-model="config.content"
+            maxlength="44"
+            show-limit-number
+            autofocus
+            clearable
+            placeholder="请输入要转化成条形码的内容"
+            :status="renderError && config.content !== '' ? 'error' : ''"
+          >
+            <template #prefixIcon>
+              <icon name="barcode" />
+            </template>
+          </t-input>
+          <div
+            v-if="renderError && config.content"
+            class="t-input__tips t-tips t-is-error"
+          >
+            您输入的内容可能不符合当前选择的条形码规范约束，请检查。
+          </div>
+        </div>
+        <div class="barcode-render">
+          <div class="barcode-title">预览</div>
+          <div class="barcode-svg narrow-scrollbar">
+            <div v-if="renderError" class="barcode-empty">当前无预览内容</div>
+            <svg ref="barcodeSvgRef" id="barcode" v-show="!renderError"></svg>
+          </div>
+        </div>
+      </div>
+    </modal>
+  </menus-button>
+</template>
+
+<script setup>
+// https://github.com/lindell/JsBarcode/wiki/Options
+import JsBarcode from 'jsbarcode'
+import svg64 from 'svg64'
+
+const { content } = defineProps({
+  content: {
+    type: String,
+  },
+})
+
+let { popupVisible, togglePopup } = usePopup()
+
+let dialogVisible = $ref(false)
+const { container, options, editor } = useStore()
+
+// 工具栏
+const formats = [
+  { label: 'CODE128', value: 'CODE128' },
+  { label: 'CODE128 A', value: 'CODE128A' },
+  { label: 'CODE128 B', value: 'CODE128B' },
+  { label: 'CODE128 C', value: 'CODE128C' },
+  { label: 'EAN13', value: 'EAN13' },
+  { label: 'UPC', value: 'UPC' },
+  { label: 'CODE39', value: 'CODE39' },
+  { label: 'ITF14', value: 'ITF14' },
+  { label: 'ITF', value: 'ITF' },
+  { label: 'MSI', value: 'MSI' },
+  { label: 'MSI10', value: 'MSI10' },
+  { label: 'MSI11', value: 'MSI11' },
+  { label: 'MSI1010', value: 'MSI1010' },
+  { label: 'MSI1110', value: 'MSI1110' },
+  { label: 'Pharmacode', value: 'Pharmacode' },
+]
+const textPositions = [
+  { label: '底部', value: 'bottom' },
+  { label: '顶部', value: 'top' },
+]
+const defaultConfig = {
+  content: '',
+  width: 2,
+  height: 100,
+  font: null,
+  format: 'CODE128',
+  lineColor: '#000',
+  background: '',
+  fontOptions: '',
+  displayValue: true,
+  textAlign: 'center',
+  textPosition: 'bottom',
+  fontSize: 20,
+  textMargin: 2,
+  margin: 10,
+  text: undefined,
+}
+let config = $ref({ ...defaultConfig })
+let changed = $ref(false)
+
+const changeFontOptions = (val) => {
+  let fontOptions = config.fontOptions.split(' ')
+  if (fontOptions.includes(val)) {
+    fontOptions = fontOptions.filter((item) => item !== val)
+  } else {
+    fontOptions.push(val)
+  }
+  config.fontOptions = fontOptions.join(' ').trim()
+}
+
+// 生成条形码
+let renderError = $ref(false)
+const barcodeSvgRef = $ref(null)
+const renderBarcode = async () => {
+  try {
+    await nextTick()
+    JsBarcode(`${container} #barcode`, config.content, config)
+    renderError = false
+  } catch {
+    renderError = true
+  }
+}
+watch(
+  () => dialogVisible,
+  (val) => {
+    if (val) {
+      config = content ? JSON.parse(content) : { ...defaultConfig }
+      setTimeout(() => (changed = false), 200)
+    }
+  },
+  { immediate: true },
+)
+watch(
+  () => config,
+  () => {
+    if (dialogVisible) {
+      changed = true
+      renderBarcode()
+    }
+  },
+  { immediate: true, deep: true },
+)
+
+// 创建或更新条形码
+const setBarcode = () => {
+  if (renderError) {
+    useMessage('error', '条形码生成失败')
+    return
+  }
+  if (config.content === '') {
+    useMessage('error', '条形码内容不能为空')
+    return
+  }
+  const width = barcodeSvgRef.width.animVal.value
+  const height = barcodeSvgRef.height.animVal.value
+  if (changed) {
+    editor.value
+      ?.chain()
+      .focus()
+      .setImage(
+        {
+          type: 'barcode',
+          src: svg64(barcodeSvgRef.outerHTML),
+          content: JSON.stringify(config),
+          width,
+          height,
+        },
+        !!content,
+      )
+      .run()
+  }
+  dialogVisible = false
+}
+</script>
+
+<style lang="less" scoped>
+.barcode-container {
+  padding: 2px;
+  .barcode-toolbar {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+  }
+  .barcode-code {
+    margin-bottom: 10px;
+    :deep(.umo-textarea__inner) {
+      height: 100%;
+      resize: none;
+    }
+    .umo-input__tips {
+      position: relative;
+    }
+  }
+  .barcode-render {
+    border: solid 1px var(--td-border-level-2-color);
+    border-radius: var(--umo-radius);
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+    .barcode-title {
+      background-color: var(--umo-button-hover-background);
+      padding: 0 10px;
+      position: absolute;
+      font-size: 12px;
+      border-bottom-right-radius: var(--umo-radius);
+    }
+    .barcode-svg {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      padding: 30px 10px;
+      min-height: 100px;
+      overflow: auto;
+      color: var(--umo-text-color);
+      svg {
+        border: solid 1px var(--umo-border-color-light);
+      }
+    }
+    .barcode-empty {
+      color: var(--umo-text-color-light);
+      font-size: 12px;
+      margin: 20px;
+    }
+  }
+}
+</style>
+
+<style lang="less">
+.barcode-toolbar-more {
+  padding: 10px 20px 10px 15px;
+  width: 300px;
+  .umo-form__item {
+    margin-bottom: 5px;
+  }
+  .umo-form__label {
+    margin-right: 20px;
+  }
+  .umo-divider--horizontal {
+    margin: 10px 0;
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/tools/chinese-case.vue b/src/components_umo/menus/toolbar/tools/chinese-case.vue
new file mode 100644
index 0000000000000000000000000000000000000000..43c04a525c27adfd6b12e5a7f84a889d9645ccc3
--- /dev/null
+++ b/src/components_umo/menus/toolbar/tools/chinese-case.vue
@@ -0,0 +1,119 @@
+<template>
+  <menus-button
+    ico="chinese-case"
+    text="中文大小写"
+    menu-type="dropdown"
+    huge
+    overlay-class-name="chinese-case-dropdown"
+  >
+    <template #dropmenu>
+      <t-dropdown-menu>
+        <t-dropdown-item
+          v-for="item in options"
+          :key="item.value"
+          :value="item.value"
+          :divider="item.divider"
+          @click="setChineseCase(item.func)"
+        >
+          <div class="label">{{ item.label }}</div>
+          <div class="desc">{{ item.desc }}</div>
+        </t-dropdown-item>
+      </t-dropdown-menu>
+    </template>
+  </menus-button>
+</template>
+
+<script setup>
+import nzh from 'nzh/cn'
+const { editor } = useStore()
+
+const options = [
+  {
+    label: '数字小写金额 → 中文大写金额',
+    desc: '人民币伍佰肆拾叁元贰角壹分',
+    func(text) {
+      const number = text
+        .toString()
+        .replaceAll(',', '')
+        .replaceAll('￥', '')
+        .replaceAll(' ', '')
+      return nzh.toMoney(number, { unOmitYuan: true, forceZheng: true })
+    },
+  },
+  {
+    label: '阿拉伯数字 → 中文小写',
+    desc: '十万零一百一十一',
+    func: (text) => nzh.encodeS(text),
+  },
+  {
+    label: '科学记数法 → 中文小写',
+    desc: '1.23456789e+21',
+    func: (text) => nzh.encodeS(text),
+    divider: true,
+  },
+  {
+    label: '中文大写金额 → 数字小写金额',
+    desc: '￥54,321.00',
+    func(text) {
+      const char = text
+        .replaceAll('人民币', '')
+        .replaceAll('元', '')
+        .replaceAll('整', '')
+      const amount = nzh.decodeB(char).toString()
+
+      // 使用正则表达式添加千位分隔符
+      const parts = amount.split('.')
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+      // 如果有小数部分，保留两位小数
+      if (parts.length === 2) {
+        parts[1] = parts[1].padEnd(2, '0')
+      } else {
+        parts.push('00')
+      }
+      // 拼接为金额格式的字符串
+      const result = parts.join('.')
+      return '￥' + result
+    },
+  },
+  {
+    label: '中文小写 → 阿拉伯数字',
+    desc: '54321',
+    func: (text) => nzh.decodeS(text),
+  },
+]
+
+const setChineseCase = (func) => {
+  try {
+    if (!editor.value) return
+    const text = editor.value.commands.getSelectionText()
+    if (text === '') return
+    const content = func(text)
+    if (content === '') {
+      throw new Error('转换失败')
+    } else {
+      editor.value.chain().focus().insertContent(content.toString()).run()
+    }
+  } catch {
+    useMessage('error', '大小写转化失败，请检查当前选中的文本。')
+  }
+}
+</script>
+
+<style lang="less">
+.chinese-case-dropdown {
+  .umo-dropdown__item {
+    max-width: unset !important;
+    &-text {
+      padding: 5px;
+      .label {
+        font-size: 14px;
+        color: var(--umo-text-color);
+      }
+      .desc {
+        color: var(--umo-text-color-light);
+        margin-top: -3px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/tools/diagrams.vue b/src/components_umo/menus/toolbar/tools/diagrams.vue
new file mode 100644
index 0000000000000000000000000000000000000000..db588ddd3e852ec524c932bd4f79509332a1a4ec
--- /dev/null
+++ b/src/components_umo/menus/toolbar/tools/diagrams.vue
@@ -0,0 +1,133 @@
+<template>
+  <menus-button
+    :ico="content ? 'edit' : 'diagrams'"
+    :text="content ? '编辑' : '流程图'"
+    huge
+    @menu-click="dialogVisible = true"
+  >
+    <modal
+      :visible="dialogVisible"
+      icon="diagrams"
+      :title="content ? '编辑流程图' : '新建流程图'"
+      :footer="false"
+      class="diagrams-dialog"
+      mode="full-screen"
+      @opened="openDiagramEditor"
+      @close="dialogVisible = false"
+    >
+      <div v-if="loading" class="diagrams-loading">
+        <t-loading text="加载中..." size="small" />
+      </div>
+      <div class="diagrams-container"></div>
+    </modal>
+  </menus-button>
+</template>
+
+<script setup>
+import DiagramEditor from '@/utils/diagram-editor'
+
+const props = defineProps({
+  content: {
+    type: String,
+  },
+})
+
+const { container, options, editor } = useStore()
+
+let dialogVisible = $ref(false)
+let loading = $ref(false)
+const diagramEditor = new DiagramEditor({
+  domain: options.value.diagrams.domain,
+  params: options.value.diagrams.params,
+  container: `${container} .diagrams-container`,
+})
+const openDiagramEditor = () => {
+  diagramEditor.edit(props.content || '')
+}
+
+let image = $ref({})
+
+const messageListener = (evt) => {
+  if (evt?.type !== 'message' && evt?.origin !== options.value.diagrams.domain)
+    return
+
+  const { event, bounds, data } = JSON.parse(evt.data)
+  if (event === 'load') loading = false
+  if (event === 'export') {
+    const { width, height } = bounds
+    if (!props.content || (props.content && props.content !== data)) {
+      image = {
+        type: 'diagrams',
+        src: data,
+        width,
+        height,
+        content: data,
+      }
+    }
+    dialogVisible = false
+    return
+  }
+  if (event === 'exit') {
+    dialogVisible = false
+  }
+}
+
+watch(
+  () => dialogVisible,
+  (val) => {
+    if (!val) {
+      window.removeEventListener('message', messageListener)
+      diagramEditor.stopEditing()
+      if (image.type) {
+        editor.value
+          ?.chain()
+          .focus()
+          .setImage(image, props.content ? true : false)
+          .run()
+      }
+      return
+    }
+    loading = true
+    window.addEventListener('message', messageListener)
+    image = {}
+  },
+)
+
+onBeforeMount(() => {
+  window.addEventListener('message', messageListener)
+})
+</script>
+
+<style lang="less">
+.diagrams-dialog {
+  .umo-dialog {
+    padding: 0 !important;
+  }
+  .umo-dialog__header {
+    background: var(--umo-color-white);
+    height: var(--td-comp-size-xxxl);
+  }
+  .umo-dialog__body {
+    padding: 0;
+  }
+}
+.diagrams-loading {
+  width: 100%;
+  height: calc(100% - var(--td-comp-size-xxxl));
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  background-color: var(--umo-container-background);
+}
+.diagrams-container {
+  height: 100%;
+  .diagrams-iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    display: block;
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/tools/mermaid.vue b/src/components_umo/menus/toolbar/tools/mermaid.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ac560c538b32ef0fb1106fbc152b536173566ca6
--- /dev/null
+++ b/src/components_umo/menus/toolbar/tools/mermaid.vue
@@ -0,0 +1,162 @@
+<template>
+  <menus-button
+    :ico="content ? 'edit' : 'mermaid'"
+    :text="content ? '编辑' : 'Mermaid'"
+    huge
+    @menu-click="menuClick"
+  >
+    <modal
+      :visible="dialogVisible"
+      icon="mermaid"
+      :title="content ? '编辑 Mermaid 图表' : '添加 Mermaid 图表'"
+      width="960px"
+      @confirm="setMermaid"
+      @close="dialogVisible = flase"
+    >
+      <div class="mermaid-container">
+        <t-textarea
+          class="mermaid-code"
+          v-model="mermaidCode"
+          autofocus
+          placeholder="请输入 Mermaid 代码"
+        />
+        <div class="mermaid-render">
+          <div class="mermaid-title">预览</div>
+          <div
+            class="mermaid-svg narrow-scrollbar"
+            ref="mermaidRef"
+            v-html="svgCode"
+          ></div>
+        </div>
+      </div>
+    </modal>
+  </menus-button>
+</template>
+
+<script setup>
+import mermaid from 'mermaid'
+import svg64 from 'svg64'
+
+const props = defineProps({
+  content: {
+    type: String,
+  },
+})
+
+let dialogVisible = $ref(false)
+const { editor } = useStore()
+
+//  初始化 Mermaid
+const mermaidInit = () => {
+  mermaid.initialize({
+    darkMode: false,
+    startOnLoad: false,
+    // fontFamily:'',
+    fontSize: 12,
+    theme: 'base',
+  })
+}
+
+const menuClick = () => {
+  dialogVisible = true
+  mermaidInit()
+}
+
+// 渲染 Mermaid
+const defaultCode = `graph TB\na-->b`
+let mermaidCode = $ref('')
+let svgCode = $ref('')
+const mermaidRef = $ref()
+const renderMermaid = async () => {
+  try {
+    const { svg } = await mermaid.render('mermaid-svg', mermaidCode)
+    svgCode = svg
+  } catch (e) {
+    svgCode = ''
+  }
+}
+watch(
+  () => dialogVisible,
+  (val) => {
+    if (val) mermaidCode = props.content || defaultCode
+  },
+  { immediate: true },
+)
+watch(
+  () => mermaidCode,
+  async () => {
+    if (dialogVisible) {
+      await nextTick()
+      renderMermaid()
+    }
+  },
+  { immediate: true },
+)
+
+// 创建或更新 Mermaid
+const setMermaid = () => {
+  if (mermaidCode === '') {
+    useMessage('error', 'Mermaid 代码不能为空')
+    return
+  }
+  const svg = mermaidRef.querySelector('svg')
+  const width = svg.width.animVal.value
+  const height = svg.height.animVal.value
+  const src = svg64(svgCode)
+  if (!props.content || (props.content && props.content !== mermaidCode)) {
+    editor.value
+      ?.chain()
+      .focus()
+      .setImage(
+        {
+          type: 'mermaid',
+          src,
+          content: mermaidCode,
+          width,
+          height,
+        },
+        props.content ? true : false,
+      )
+      .run()
+  }
+  dialogVisible = false
+}
+</script>
+
+<style lang="less" scoped>
+.mermaid-container {
+  display: flex;
+  .mermaid-code {
+    width: 320px;
+    margin-left: 2px;
+    :deep(.umo-textarea__inner) {
+      height: 100%;
+      resize: none;
+    }
+  }
+  .mermaid-render {
+    flex: 1;
+    margin-left: 20px;
+    border: solid 1px var(--td-border-level-2-color);
+    border-radius: var(--umo-radius);
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+    .mermaid-title {
+      background-color: var(--umo-button-hover-background);
+      padding: 0 10px;
+      position: absolute;
+      font-size: 12px;
+      border-bottom-right-radius: var(--umo-radius);
+    }
+    .mermaid-svg {
+      box-sizing: border-box;
+      height: 320px;
+      padding: 40px 20px 20px;
+      overflow: auto;
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/tools/mind-map.vue b/src/components_umo/menus/toolbar/tools/mind-map.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8a66428033341794227a91feeba95af3dc1d097b
--- /dev/null
+++ b/src/components_umo/menus/toolbar/tools/mind-map.vue
@@ -0,0 +1,5 @@
+<template>
+  <menus-button ico="mind-map" text="思维导图" huge />
+</template>
+
+<script setup></script>
diff --git a/src/components_umo/menus/toolbar/tools/qrcode.vue b/src/components_umo/menus/toolbar/tools/qrcode.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0209f97abb2cc23b5697126856684cf9a98ed52a
--- /dev/null
+++ b/src/components_umo/menus/toolbar/tools/qrcode.vue
@@ -0,0 +1,259 @@
+<template>
+  <menus-button
+    :ico="content ? 'edit' : 'qrcode'"
+    :text="content ? '编辑' : '二维码'"
+    huge
+    @menu-click="menuClick"
+  >
+    <modal
+      :visible="dialogVisible"
+      icon="qrcode"
+      :title="content ? '编辑二维码' : '插入二维码'"
+      width="695px"
+      @confirm="setQrcode"
+      @close="dialogVisible = false"
+    >
+      <div class="qrcode-container">
+        <div class="qrcode-toolbar">
+          <menus-button
+            style="width: 126px"
+            text="二维码容错能力"
+            :select-options="levels"
+            menu-type="select"
+            :value="config.ecl"
+            @menu-click="(value) => (config.ecl = value)"
+          ></menus-button>
+          <menus-button menu-type="input" tooltip="二维码四周留白大小">
+            <t-input-number
+              v-model="config.padding"
+              size="small"
+              theme="normal"
+              :max="10"
+              :min="0"
+              :allow-input-over-limit="false"
+              placeholder=""
+            >
+              <template #label><span>四周留白：</span></template>
+            </t-input-number>
+          </menus-button>
+          <menus-button menu-type="input" tooltip="二维码的宽度和高度">
+            <t-input-number
+              v-model="config.width"
+              size="small"
+              theme="normal"
+              :max="1024"
+              :min="64"
+              :allow-input-over-limit="false"
+              placeholder=""
+            >
+              <template #label><span>宽高度：</span></template>
+            </t-input-number>
+          </menus-button>
+          <t-divider layout="vertical" />
+          <menus-toolbar-base-color
+            text="二维码颜色"
+            :default-color="config.color"
+            modeless
+            @change="(value) => (config.color = value)"
+          />
+          <menus-toolbar-base-background-color
+            text="二维码背景颜色"
+            :default-color="config.background"
+            modeless
+            @change="(value) => (config.background = value)"
+          />
+        </div>
+        <div class="qrcode-code">
+          <t-textarea
+            v-model="config.content"
+            maxlength="200"
+            show-limit-number
+            autofocus
+            autosize
+            placeholder="请输入要转化成二维码的内容"
+          >
+          </t-textarea>
+          <div
+            v-if="renderError && config.content !== ''"
+            class="t-input__tips t-tips t-is-error"
+          >
+            二维码生成错误。
+          </div>
+        </div>
+        <div class="qrcode-render">
+          <div class="qrcode-title">预览</div>
+          <div class="qrcode-svg narrow-scrollbar">
+            <div v-if="!svgCode" class="qrcode-empty">当前无预览内容</div>
+            <div class="svg" v-else v-html="svgCode"></div>
+          </div>
+        </div>
+      </div>
+    </modal>
+  </menus-button>
+</template>
+
+<script setup>
+import QRCode from 'qrcode-svg'
+import svg64 from 'svg64'
+
+const { content } = defineProps({
+  content: {
+    type: String,
+  },
+})
+
+let dialogVisible = $ref(false)
+const { editor } = useStore()
+
+const menuClick = async () => {
+  renderQrcode()
+  dialogVisible = true
+}
+
+const levels = [
+  { label: '低', value: 'L' },
+  { label: '中', value: 'M' },
+  { label: '高', value: 'Q' },
+  { label: '最高', value: 'H' },
+]
+const defaultConfig = {
+  ecl: 'M',
+  padding: 1,
+  width: 256,
+  height: 256,
+  color: '#000000',
+  background: '#ffffff',
+  content: '',
+  xmlDeclaration: false,
+  join: true,
+  pretty: false,
+  container: 'svg-viewbox',
+}
+
+let config = $ref({ ...defaultConfig })
+let changed = $ref(false)
+
+let svgCode = $ref(null)
+let renderError = $ref(false)
+const renderQrcode = () => {
+  try {
+    svgCode = null
+    config.height = config.width
+    const qrcode = new QRCode(config)
+    svgCode = qrcode.svg()
+    renderError = false
+  } catch {
+    svgCode = null
+    renderError = true
+  }
+}
+watch(
+  () => dialogVisible,
+  (val) => {
+    if (val) {
+      config = content ? JSON.parse(content) : { ...defaultConfig }
+      setTimeout(() => (changed = false), 200)
+    }
+  },
+  { immediate: true },
+)
+watch(
+  () => config,
+  () => {
+    if (dialogVisible) {
+      changed = true
+      renderQrcode()
+    }
+  },
+  { immediate: true, deep: true },
+)
+
+// 创建或更新条形码
+const setQrcode = () => {
+  if (renderError || !svgCode) {
+    useMessage('error', '条形码生成失败')
+    return
+  }
+  if (config.content === '') {
+    useMessage('error', '条形码内容不能为空')
+    return
+  }
+  const { width, height } = config
+  const src = svg64(svgCode)
+  if (changed) {
+    editor.value
+      ?.chain()
+      .focus()
+      .setImage(
+        {
+          type: 'qrcode',
+          src,
+          content: JSON.stringify(config),
+          width,
+          height,
+        },
+        !!content,
+      )
+      .run()
+  }
+  dialogVisible = false
+}
+</script>
+
+<style lang="less" scoped>
+.qrcode-container {
+  padding: 2px;
+  .qrcode-toolbar {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+  }
+  .qrcode-code {
+    margin-bottom: 10px;
+    :deep(.umo-textarea__inner) {
+      height: 100%;
+      resize: none;
+    }
+    .umo-input__tips {
+      position: relative;
+    }
+  }
+  .qrcode-render {
+    border: solid 1px var(--td-border-level-2-color);
+    border-radius: var(--umo-radius);
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+    .qrcode-title {
+      background-color: var(--umo-button-hover-background);
+      padding: 0 10px;
+      position: absolute;
+      font-size: 12px;
+      border-bottom-right-radius: var(--umo-radius);
+    }
+    .qrcode-empty {
+      color: var(--umo-text-color-light);
+      font-size: 12px;
+      margin: 40px;
+    }
+    .qrcode-svg {
+      box-sizing: border-box;
+      padding: 30px 10px;
+      min-height: 100px;
+      overflow: auto;
+      color: var(--umo-text-color);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      > .svg {
+        border: solid 1px var(--umo-border-color-light);
+        :deep(svg) {
+          display: block;
+          width: 256px;
+          height: 256px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/tools/seal.vue b/src/components_umo/menus/toolbar/tools/seal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dee40fd52d4592b3a030625c4f6c49f58548e802
--- /dev/null
+++ b/src/components_umo/menus/toolbar/tools/seal.vue
@@ -0,0 +1,129 @@
+<template>
+  <menus-button
+    v-if="imglyRemoveBackground"
+    ico="seal"
+    text="电子签章"
+    huge
+    @menu-click="dialogVisible = true"
+  >
+    <modal
+      :visible="dialogVisible"
+      icon="seal"
+      title="插入电子签章"
+      width="480px"
+      confirm-btn="插入"
+      @confirm="setSeal"
+      @close="dialogVisible = false"
+    >
+      <div class="seal-container" @click="selectImage">
+        <div class="tip">
+          选择纯色背景电子章的影印件或者照片，将自动扣取电子章，所有操作在本地完成，不会向服务器发送数据，请放心使用。
+        </div>
+        <div class="seal-uploader">
+          <span v-if="!sealImg">{{
+            converting ? converting : '点击此处选择电子章图片'
+          }}</span>
+          <img class="seal-img" v-else :src="sealImg" />
+        </div>
+      </div>
+    </modal>
+  </menus-button>
+</template>
+
+<script setup>
+import imglyRemoveBackground from '@imgly/background-removal'
+
+let dialogVisible = $ref(false)
+const { options, editor } = useStore()
+
+let sealImg = $ref(null)
+let converting = $ref(null)
+let file = $ref(null)
+
+const selectImage = async () => {
+  const { open, onChange } = useFileDialog({
+    accept: 'image/png,image/jpeg',
+    multiple: false,
+    reset: true,
+  })
+  // 打开文件对话框
+  open()
+  // 选择图片
+  onChange(async (files) => {
+    if (!files) return
+    file = files[0]
+    if (!file) return
+    try {
+      sealImg = null
+      converting = '正在加载组件...'
+      const img = await imglyRemoveBackground(file, {
+        publicPath: `${options.value.cdnUrl}/libs/imgly/background-removal-data/`,
+        progress: (key, current, total) => {
+          if (key.startsWith('fetch')) {
+            converting = `正在加载组件: ${((current / total) * 100).toFixed(1)}%`
+          } else {
+            converting = '正在抠图中，请稍后...'
+          }
+        },
+      })
+      sealImg = URL.createObjectURL(img)
+    } catch {
+      useMessage('error', '电子章抠取失败，请重试')
+      sealImg = null
+    } finally {
+      converting = null
+    }
+  })
+}
+
+const setSeal = () => {
+  if (!sealImg) {
+    useMessage('error', '请选择电子章')
+    return
+  }
+  editor.value
+    ?.chain()
+    .focus()
+    .setImage({
+      type: 'seal',
+      src: sealImg,
+      width: 150,
+      draggable: true,
+      rotatable: true,
+      file,
+    })
+    .run()
+  dialogVisible = false
+  sealImg = null
+  converting = null
+}
+</script>
+
+<style lang="less" scoped>
+.seal-container {
+  .seal-tip {
+    font-size: 12px;
+    color: var(--umo-text-color-light);
+    margin-bottom: 6px;
+    line-height: 1.4;
+  }
+  .seal-uploader {
+    margin-top: 20px;
+    height: 240px;
+    border: solid 1px var(--umo-primary-color);
+    border-radius: var(--umo-radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    color: var(--umo-text-color-light);
+    .seal-img {
+      max-height: 100%;
+      max-width: 100%;
+      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBvcGFjaXR5PSIwLjEiPgo8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjgiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjQiIHk9IjQiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjEyIiB5PSI0IiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSJibGFjayIvPgo8cmVjdCB5PSI4IiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSJibGFjayIvPgo8cmVjdCB4PSI4IiB5PSI4IiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSJibGFjayIvPgo8cmVjdCB4PSI0IiB5PSIxMiIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMTIiIHk9IjEyIiB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K);
+      background-size: 24px;
+    }
+  }
+}
+</style>
diff --git a/src/components_umo/menus/toolbar/tools/signature.vue b/src/components_umo/menus/toolbar/tools/signature.vue
new file mode 100644
index 0000000000000000000000000000000000000000..75c063f765bc55481f52c1b1fe8cd5269853ce41
--- /dev/null
+++ b/src/components_umo/menus/toolbar/tools/signature.vue
@@ -0,0 +1,137 @@
+<template>
+  <menus-button
+    ico="signature"
+    text="电子签名"
+    huge
+    @menu-click="dialogVisible = true"
+  >
+    <modal
+      v-model:visible="dialogVisible"
+      icon="signature"
+      title="插入电子签名"
+      width="642px"
+      @confirm="setSignature"
+      @close="dialogVisible = false"
+    >
+      <div class="signature-toolbar">
+        <menus-button text="清空画布" @menu-click="reset">
+          <icon name="clear-format" />
+        </menus-button>
+        <menus-toolbar-base-color
+          modeless
+          default-color="#000"
+          @change="changeLineColor"
+        />
+        <menus-button
+          text="画笔粗细"
+          menu-type="dropdown"
+          :select-options="lineWidthOptions"
+          @change="changeLineWidth"
+        >
+          <icon name="highlight" />
+        </menus-button>
+      </div>
+      <div class="signature-container" data-tip="请在当前区域签名">
+        <signature
+          ref="signatureRef"
+          :line-color="lineColor"
+          :line-width="lineWidth"
+          :width="600"
+          :height="200"
+          is-crop
+          format="image/png"
+        />
+      </div>
+    </modal>
+  </menus-button>
+</template>
+
+<script setup>
+import signature from 'vue-esign'
+
+const { editor } = useStore()
+let dialogVisible = $ref(false)
+
+let lineColor = $ref('#000')
+let lineWidth = $ref(5)
+const lineWidthOptions = $ref([
+  { content: '2', value: 2 },
+  { content: '3', value: 3 },
+  { content: '4', value: 4 },
+  { content: '5', value: 5 },
+  { content: '6', value: 6 },
+  { content: '7', value: 7 },
+  { content: '8', value: 8 },
+])
+const signatureRef = $ref(null)
+const reset = () => {
+  signatureRef.reset()
+}
+
+const changeLineColor = (color) => {
+  lineColor = color
+}
+const changeLineWidth = ({ value }) => {
+  lineWidth = value
+}
+
+const setSignature = async () => {
+  try {
+    const image = await signatureRef.generate()
+    editor.value
+      ?.chain()
+      .focus()
+      .setImage({
+        type: 'signature',
+        src: image,
+        width: 80,
+        draggable: true,
+      })
+      .run()
+    dialogVisible = false
+  } catch {
+    useMessage('error', '没有检测到您的签名')
+  }
+}
+
+watch(
+  () => dialogVisible,
+  (val) => {
+    if (!val) reset()
+  },
+)
+</script>
+
+<style lang="less" scoped>
+.desc {
+  font-size: 12px;
+  color: var(--umo-text-color-light);
+  margin-left: 10px;
+}
+.signature-toolbar {
+  margin-bottom: 10px;
+}
+.signature-container {
+  border: solid 1px var(--umo-primary-color);
+  box-sizing: border-box;
+  border-radius: var(--umo-radius);
+  overflow: hidden;
+  position: relative;
+  &::before {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    content: attr(data-tip);
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    color: var(--umo-text-color-light);
+    letter-spacing: 5px;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+</style>
diff --git a/src/components_umo/modal.vue b/src/components_umo/modal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3d27c7a89886720910aa420ad9067820bc3466fb
--- /dev/null
+++ b/src/components_umo/modal.vue
@@ -0,0 +1,29 @@
+<template>
+  <t-dialog
+    :visible="visible"
+    :attach="container"
+    :prevent-scroll-through="false"
+    placement="center"
+    draggable
+    destroy-on-close
+    v-bind="$attrs"
+  >
+    <template #header>
+      <icon v-if="$attrs.icon" :name="$attrs.icon" />
+      <span>{{ $attrs.title }}</span>
+    </template>
+    <slot />
+  </t-dialog>
+</template>
+
+<script setup>
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+})
+const { container } = useStore()
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/components_umo/options.js b/src/components_umo/options.js
new file mode 100644
index 0000000000000000000000000000000000000000..2e3fe2c65980d784ca995cbbdc3430e1a89c1baa
--- /dev/null
+++ b/src/components_umo/options.js
@@ -0,0 +1,530 @@
+import { ObjectSchema } from "@humanwhocodes/object-schema";
+
+// 默认配置
+const defaultOptions = {
+  editorKey: "default",
+  height: "100%",
+  dicts: {
+    fonts: [
+      { label: "默认字体", value: null },
+      { label: "宋体", value: "SimSun" },
+      { label: "黑体", value: "SimHei" },
+      { label: "楷体", value: "KaiTi" },
+      { label: "楷体_GB2312", value: "KaiTi_GB2312" },
+      { label: "仿宋", value: "FangSong" },
+      { label: "仿宋_GB2312", value: "FangSong_GB2312" },
+      { label: "华文宋体", value: "STSong" },
+      { label: "华文仿宋", value: "STFangsong" },
+      { label: "方正仿宋简体", value: "FZFangSong-Z02S" },
+      { label: "方正小标宋", value: "FZXiaoBiaoSong-B05S" },
+      { label: "微软雅黑", value: "Microsoft Yahei" },
+      { label: "Arial", value: "Arial" },
+      { label: "Times New Roman", value: "Times New Roman" },
+      { label: "Verdana", value: "Verdana" },
+      { label: "Helvetica", value: "Helvetica" },
+      { label: "Calibri", value: "Calibri" },
+      { label: "Cambria", value: "Cambria" },
+      { label: "Tahoma", value: "Tahoma" },
+      { label: "Georgia", value: "Georgia" },
+      { label: "Comic Sans MS", value: "Comic Sans MS" },
+      { label: "Impact", value: "Impact" }
+    ],
+    // prettier-ignore
+    colors: [
+    '#FFF','#000','#4A5366','#3B74EC','#45A2EF','#529867','#CD4A3F','#EA8D40','#EEC543', '#8E45D0','#F2F2F2','#7F7F7F','#F4F5F7','#CBDCFC','#E8F6FE','#EDFAF2','#FCEAE9','#FDF3EC','#FEF9E5','#FAECFE','#EEE','#595959','#C6CAD2','#CEEBFD','#CBDCFC','#CBE9D7','#F7CBC9','#FADDC7','#FDEEB5','#EBCAFC', '#BFBFBF','#3F3F3F','#828B9D','#A0BEFA','#A7DCFC','#A6D5B8','#F2A19C','#F5BC8C','#FBE281','#CB94F9','#A5A5A5','#262626','#363B44','#2452B2','#3473A1','#417A53','#922B22','#AD642A','#9E8329','#57297D','#939393','#0D0D0D','#25272E','#15316A','#1C415A','#284D34','#511712','#573213','#635217','#36194E',
+  ],
+    lineHeights: [
+      { label: "单倍行距", value: 1 },
+      { label: "1.5 倍行距", value: 1.5, default: true },
+      { label: "2 倍行距", value: 2 },
+      { label: "2.5 倍行距", value: 2.5 },
+      { label: "3 倍行距", value: 3 }
+    ],
+    specialCharacters: [
+      { label: "普通文本", items: "‹›«»‘’“”‚„¡¿‥…‡‰‱‼⁈⁉⁇©®™§¶⁋" },
+      { label: "货币符号", items: "$€¥£¢₠₡₢₣₤¤₿₥₦₧₨₩₪₫₭₮₯₰₱₲₳₴₵₶₷₸₹₺₻₼₽" },
+      {
+        label: "数学符号",
+        items: "<>≤≥–—¯‾°−±÷⁄׃∫∑∞√∼≅≈≠≡∈∉∋∏∧∨¬∩∪∂∀∃∅∇∗∝∠¼½¾"
+      },
+      { label: "箭头", items: "←→↑↓⇐⇒⇑⇓⇠⇢⇡⇣⇤⇥⤒⤓↨" },
+      {
+        label: "拉丁语",
+        items: "ĀāĂ㥹ĆćĈĉĊċČčĎďĐđĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſ"
+      }
+    ],
+    emojis: [
+      {
+        label: "表情与角色",
+        items:
+          "😀 😃 😄 😁 😆 😅 🤣 😂 🙂 🙃 🫠 😉 😊 😇 🥰 😍 🤩 😘 😗 ☺️ 😚 😙 🥲 😋 😛 😜 🤪 😝 🤑 🤗 🤭 🫢 🫣 🤫 🤔 🫡 🤐 🤨 😐 😑 😶 🫥 😶‍🌫️ 😏 😒 🙄 😬 😮‍💨 🤥 😌 😔 😪 🤤 😴 😷 🤒 🤕 🤢 🤮 🤧 🥵 🥶 🥴 😵 😵‍💫 🤯 🤠 🥳 🥸 😎 🤓 🧐 😕 🫤 😟 🙁 ☹️ 😮 😯 😲 😳 🥺 🥹 😦 😧 😨 😰 😥 😢 😭 😱 😖 😣 😞 😓 😩 😫 🥱 😤 😡 😠 🤬 😈 👿 💀 ☠️ 💩 🤡 👹 👺 👻 👽 👾 🤖 👋 🤚 🖐️ ✋ 🖖 🫱 🫲 🫳 🫴 👌 🤌 🤏 ✌️ 🤞 🫰 🤟 🤘 🤙 👈 👉 👆 🖕 👇 ☝️ 🫵 👍 👎 ✊ 👊 🤛 🤜 👏 🙌 🫶 👐 🤲 🤝 🙏 ✍️ 💅 🤳 💪 🦾 🦿 🦵 🦶 👂 🦻"
+      },
+      {
+        label: "动物与自然",
+        items:
+          "🐵 🐒 🦍 🦧 🐶 🐕 🦮 🐕‍🦺 🐩 🐺 🦊 🦝 🐱 🐈 🐈‍⬛ 🦁 🐯 🐅 🐆 🐴 🐎 🦄 🦓 🦌 🦬 🐮 🐂 🐃 🐄 🐷 🐖 🐗 🐽 🐏 🐑 🐐 🐪 🐫 🦙 🦒 🐘 🦣 🦏 🦛 🐭 🐁 🐀 🐹 🐰 🐇 🐿️ 🦫 🦔 🦇 🐻 🐻‍❄️ 🐨 🐼 🦥 🦦 🦨 🦘 🦡 🐾 🦃 🐔 🐓 🐣 🐤 🐥 🐦 🐧 🕊️ 🦅 🦆 🦢 🦉 🦤 🪶 🦩 🦚 🦜 🐸 🐊 🐢 🦎 🐍 🐲 🐉 🦕 🦖 🐳 🐋 🐬 🦭 🐟 🐠 🐡 🦈 🐙 🐚 🪸 🐌 🦋 🐛 🐜 🐝 🪲 🐞 🦗 🪳 🕷️ 🕸️ 🦂 🦟 🪰 🪱 🦠 💐 🌸 💮 🪷 🏵️ 🌹 🥀 🌺 🌻 🌼 🌷 🌱 🪴 🌲 🌳 🌴 🌵 🌾 🌿 ☘️ 🍀 🍁 🍂 🍃 🪹 🪺"
+      },
+      {
+        label: "食物与食品",
+        items:
+          "🥬 🥦 🧄 🧅 🍄 🥜 🫘 🌰 🍞 🥐 🥖 🫓 🥨 🥯 🥞 🧇 🧀 🍖 🍗 🥩 🥓 🍔 🍟 🍕 🌭 🥪 🌮 🌯 🫔 🥙 🧆 🥚 🍳 🥘 🍲 🫕 🥣 🥗 🍿 🧈 🧂 🥫 🍱 🍘 🍙 🍚 🍛 🍜 🍝 🍠 🍢 🍣 🍤 🍥 🥮 🍡 🥟 🥠 🥡 🦀 🦞 🦐 🦑 🦪 🍦 🍧 🍨 🍩 🍪 🎂 🍰 🧁 🥧 🍫 🍬 🍭 🍮 🍯 🍼 🥛 ☕ 🫖 🍵 🍶 🍾 🍷 🍸 🍹 🍺 🍻 🥂 🥃 🫗 🥤 🧋 🧃 🧉 🧊 🥢 🍽️ 🍴 🥄 🔪 🫙 🏺"
+      },
+      {
+        label: "活动",
+        items: "🎗️ 🎟️ 🎫 🎖️ 🏆 🏅 🥇 🥈 🥉 ⚽ ⚾ 🥎 🏀 🏐 🏈 🏉 🎾 🥏 🎳 🏏 🏑 🏒 🥍 🏓 🏸 🥊 🥋 🥅 ⛳ ⛸️ 🎣 🤿 🎽 🎿 🛷 🥌 🎯 🪀 🪁 🎱 🔮 🪄 🧿 🪬 🎮 🕹️ 🎰 🎲 🧩 🧸 🪅 🪩 🪆 ♠️ ♥️ ♦️ ♣️ ♟️ 🃏 🀄 🎴 🎭 🖼️ 🎨 🧵 🪡 🧶 🪢"
+      },
+      {
+        label: "旅行与景点",
+        items:
+          "🚈 🚉 🚊 🚝 🚞 🚋 🚌 🚍 🚎 🚐 🚑 🚒 🚓 🚔 🚕 🚖 🚗 🚘 🚙 🛻 🚚 🚛 🚜 🏎️ 🏍️ 🛵 🦽 🦼 🛺 🚲 🛴 🛹 🛼 🚏 🛣️ 🛤️ 🛢️ ⛽ 🛞 🚨 🚥 🚦 🛑 🚧 ⚓ 🛟 ⛵ 🛶 🚤 🛳️ ⛴️ 🛥️ 🚢 ✈️ 🛩️ 🛫 🛬 🪂 💺 🚁 🚟 🚠 🚡 🛰️ 🚀 🛸 🛎️ 🧳 ⌛ ⏳ ⌚ ⏰ ⏱️ ⏲️ 🕰️ 🕛 🕧 🕐 🕜 🕑 🕝 🕒 🕞 🕓 🕟 🕔 🕠 🕕 🕡 🕖 🕢 🕗 🕣 🕘 🕤 🕙 🕥 🕚 🕦 🌑 🌒 🌓 🌔 🌕 🌖 🌗 🌘 🌙 🌚 🌛 🌜 🌡️ ☀️ 🌝 🌞 🪐 ⭐ 🌟 🌠 🌌 ☁️ ⛅ ⛈️ 🌤️ 🌥️ 🌦️ 🌧️ 🌨️ 🌩️ 🌪️ 🌫️ 🌬️ 🌀 🌈 🌂 ☂️ ☔ ⛱️ ⚡ ❄️ ☃️ ⛄ ☄️ 🔥 💧 🌊"
+      },
+      {
+        label: "物品",
+        items:
+          "📃 📜 📄 📰 🗞️ 📑 🔖 🏷️ 💰 🪙 💴 💵 💶 💷 💸 💳 🧾 💹 ✉️ 📧 📨 📩 📤 📥 📦 📫 📪 📬 📭 📮 🗳️ ✏️ ✒️ 🖋️ 🖊️ 🖌️ 🖍️ 📝 💼 📁 📂 🗂️ 📅 📆 🗒️ 🗓️ 📇 📈 📉 📊 📋 📌 📍 📎 🖇️ 📏 📐 ✂️ 🗃️ 🗄️ 🗑️ 🔒 🔓 🔏 🔐 🔑 🗝️ 🔨 🪓 ⛏️ ⚒️ 🛠️ 🗡️ ⚔️ 🔫 🪃 🏹 🛡️ 🪚 🔧 🪛 🔩 ⚙️ 🗜️ ⚖️ 🦯 🔗 ⛓️ 🪝 🧰 🧲 🪜 ⚗️ 🧪 🧫 🧬 🔬 🔭 📡 💉 🩸 💊 🩹 🩼 🩺 🩻 🚪 🛗 🪞 🪟 🛏️ 🛋️ 🪑 🚽 🪠 🚿 🛁 🪤 🪒 🧴 🧷 🧹 🧺 🧻 🪣 🧼 🫧 🪥 🧽 🧯 🛒 🚬 ⚰️ 🪦 ⚱️ 🗿 🪧 🪪"
+      },
+      {
+        label: "符号",
+        items: "➰ ➿ 〽️ ✳️ ✴️ ❇️ ©️ ®️ ™️ #️⃣ *️⃣ 0️⃣ 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣ 🔟 🔠 🔡 🔢 🔣 🔤 🅰️ 🆎 🅱️ 🆑 🆒 🆓 ℹ️ 🆔 Ⓜ️ 🆕 🆖 🅾️ 🆗 🅿️ 🆘 🆙 🆚 🈁 🈂️ 🔴 🟠 🟡 🟢 🔵 🟣 🟤 ⚫ ⚪ 🟥 🟧 🟨 🟩 🟦 🟪 🟫 ⬛ ⬜ ◼️ ◻️ ◾ ◽ ▪️ ▫️ 🔶 🔷 🔸 🔹 🔺 🔻 💠 🔘 🔳 🔲"
+      },
+      {
+        label: "旗帜",
+        items:
+          "🏁 🇨🇳 🎌 🇩🇪 🇪🇸 🇦🇨 🇦🇩 🇦🇪 🇦🇫 🇦🇬 🇦🇮 🇦🇱 🇦🇲 🇦🇴 🇦🇶 🇦🇷 🇦🇸 🇦🇹 🇦🇺 🇦🇼 🇦🇽 🇦🇿 🇧🇦 🇧🇧 🇧🇩 🇧🇪 🇧🇫 🇧🇬 🇧🇭 🇧🇮 🇧🇯 🇧🇱 🇧🇲 🇧🇳 🇧🇴 🇧🇶 🇧🇷 🇧🇸 🇧🇹 🇧🇻 🇧🇼 🇧🇾 🇧🇿 🇨🇦 🇨🇨 🇨🇩 🇨🇫 🇨🇬 🇨🇭 🇨🇮 🇨🇰 🇨🇱 🇨🇲 🇨🇴 🇨🇵 🇨🇷 🇨🇺 🇨🇻 🇨🇼 🇨🇽 🇨🇾 🇨🇿 🇩🇬 🇩🇯 🇩🇰 🇩🇲 🇩🇴 🇩🇿 🇪🇦 🇪🇨 🇪🇪 🇪🇬 🇪🇭 🏴󠁧󠁢󠁥󠁮󠁧󠁿 🇪🇷 🇪🇹 🇪🇺 🇫🇮 🇫🇯 🇫🇰 🇫🇲 🇫🇴 🇬🇦 🇬🇩 🇬🇪 🇬🇫 🇬🇬 🇬🇭 🇬🇮 🇬🇱 🇬🇲 🇬🇳 🇬🇵 🇬🇶 🇬🇷 🇬🇸 🇬🇹 🇬🇺 🇬🇼 🇬🇾 🇭🇰 🇭🇲 🇭🇳 🇭🇷 🇭🇹 🇭🇺 🇮🇨 🇮🇩 🇮🇪 🇮🇱 🇮🇲 🇮🇳 🇮🇴 🇮🇶 🇮🇷 🇮🇸 🇯🇪 🇯🇲 🇯🇴 🇰🇪 🇰🇬 🇰🇭 🇰🇮 🇰🇲 🇰🇳 🇰🇵 🇰🇼 🇰🇾 🇰🇿 🇱🇦 🇱🇧 🇱🇨 🇱🇮 🇱🇰 🇱🇷 🇱🇸 🇱🇹 🇱🇺 🇱🇻 🇱🇾 🇲🇦 🇲🇨 🇲🇩 🇲🇪 🇲🇫 🇲🇬 🇲🇭 🇲🇰 🇲🇱 🇲🇲 🇲🇳 🇲🇴 🇲🇵 🇲🇶 🇲🇷 🇲🇸 🇲🇹 🇲🇺 🇲🇻 🇲🇼 🇲🇽 🇲🇾 🇲🇿 🇳🇦 🇳🇨 🇳🇪 🇳🇫 🇳🇬 🇳🇮 🇳🇱 🇳🇴"
+      }
+    ],
+    pageSizes: [
+      { label: "A4", width: 21.0, height: 29.4, default: true },
+      { label: "A3", width: 29.7, height: 42.0 },
+      { label: "A5", width: 14.8, height: 21.0 },
+      { label: "B5", width: 17.6, height: 25.0 },
+      { label: "5号信封", width: 10.9, height: 12.9 },
+      { label: "6号信封", width: 11.9, height: 22.9 },
+      { label: "7号信封", width: 16.1, height: 22.8 }, 
+      { label: "9号信封", width: 22.8, height: 32.3 },
+      { label: "法律用纸", width: 21.5, height: 33.5 },
+      { label: "信纸", width: 21.5, height: 27.9 }
+    ]
+  },
+  toolbar: {
+    defaultMode: "ribbon",
+    enableSourceEditor: false,
+    // menus: ["base", "insert", "table", "tools", "page", "export"],
+    menus: ["base", "insert", "table"],
+    disableMenuItems: []
+  },
+  page: {
+    defaultMargin: {
+      left: 3.18,
+      right: 3.18,
+      top: 2.54,
+      bottom: 2.54
+    },
+    defaultOrientation: "horizontal",
+    defaultBackground: "#fff",
+    showBreakMarks: true,
+    watermark: {
+      type: "compact",
+      alpha: 0.2,
+      fontColor: "#000",
+      fontSize: 16,
+      fontFamily: "SimSun",
+      fontWeight: "normal",
+      text: ""
+    }
+  },
+  document: {
+    title: "未命名文档",
+    content: "",
+    placeholder: "请输入文档内容...",
+    enableSpellcheck: true,
+    enableMarkdown: true,
+    enableBubbleMenu: true,
+    enableBlockMenu: true,
+    readOnly: false,
+    autofocus: true,
+    characterLimit: 0,
+    typographyRules: {},
+    autoSave: {
+      enabled: true,
+      interval: 300000
+    }
+  },
+  templates: [],
+  cdnUrl: "https://unpkg.com/@umoteam/editor-external@latest",
+  shareUrl: location?.href || "",
+  diagrams: {
+    domain: "https://embed.diagrams.net",
+    // https://www.drawio.com/doc/faq/supported-url-parameters
+    params: {}
+  },
+  file: {
+    allowedMimeTypes: [],
+    maxSize: 1024 * 1024 * 100 // 100M
+  },
+  extensions: [],
+  async onSave(content, page, document) {
+    throw new Error('Key "onSave": Please set the save method');
+  },
+  async onFileUpload(file) {
+    if (!file) throw new Error("File not found");
+    throw new Error('Key "onFileUpload": Please set the upload method');
+  },
+  onFileDelete(id, src) {
+    console.error("The file has been deleted. Please configure the onFileDelete to completely delete the file from the server.");
+  }
+};
+
+// 组件 props 所需格式
+const propsOptions = Object.keys(defaultOptions);
+
+const isNumber = (char) => {
+  if (typeof char === "number") {
+    return isFinite(char);
+  }
+  if (typeof char === "string") {
+    const parsed = parseFloat(char);
+    return !isNaN(parsed) && isFinite(parsed) && char === parsed.toString();
+  }
+  return false;
+};
+
+const ojbectSchema = new ObjectSchema({
+  editorKey: {
+    merge: "replace",
+    validate: "string!"
+  },
+  height: {
+    merge: "replace",
+    validate: "string!"
+  },
+  dicts: {
+    schema: {
+      fonts: {
+        merge: "replace",
+        validate(value) {
+          if (value && !Array.isArray(value)) {
+            throw new Error('Key "dicts": Key "fonts" must be a array.');
+          }
+          value.forEach((item) => {
+            if (!item.label || (!item.value && item.value !== null)) {
+              throw new Error('Key "dicts": Key "fonts" must be a array of objects with "label" and "value" properties.');
+            }
+          });
+        }
+      },
+      colors: {
+        merge: "replace",
+        validate: "array"
+      },
+      lineHeights: {
+        merge: "replace",
+        validate(value) {
+          if (value && !Array.isArray(value)) {
+            throw new Error('Key "dicts": Key "lineHeights": must be a array.');
+          }
+          if (!value.find((item) => item.default)) {
+            throw new Error('Key "dicts": Key "lineHeights": please set a default value.');
+          }
+          value.forEach((item) => {
+            if (!item.label || (!item.value && item.value !== null)) {
+              throw new Error('Key "dicts": Key "lineHeights": must be a array of objects with "label" and "value" properties.');
+            }
+          });
+        }
+      },
+      specialCharacters: {
+        merge: "replace",
+        validate: "array"
+      },
+      emojis: {
+        merge: "replace",
+        validate: "array"
+      },
+      pageSizes: {
+        merge: "replace",
+        validate(value) {
+          if (value && !Array.isArray(value)) {
+            throw new Error('Key "dicts": Key "pageSizes": must be a array.');
+          }
+          if (!value.find((item) => item.default)) {
+            throw new Error('Key "dicts": Key "pageSizes": please set a default value.');
+          }
+          value.forEach((item, index) => {
+            if (!item.label || item.label === "") {
+              throw new Error(`Key "dicts": Key "pageSizes[${index}]" Key: "label" cannot be empty.`);
+            }
+            if (!isNumber(item.width)) {
+              throw new Error(`Key "dicts": Key "pageSizes[${index}]" Key: "width" must be a number.`);
+            }
+            if (!isNumber(item.height)) {
+              throw new Error(`Key "dicts": Key "pageSizes[${index}]" Key: "height" must be a number.`);
+            }
+          });
+        }
+      }
+    }
+  },
+  toolbar: {
+    schema: {
+      defaultMode: {
+        merge: "replace",
+        validate(value) {
+          if (value && !["classic", "ribbon"].includes(value)) {
+            throw new Error('Key "toolbar": Key "defaultMode" must be one of "classic" or "ribbon".');
+          }
+        }
+      },
+      enableSourceEditor: {
+        merge: "replace",
+        validate: "boolean"
+      },
+      menus: {
+        merge: "replace",
+        validate(value) {
+          const defaultMenus = defaultOptions.toolbar.menus;
+          if (value && !Array.isArray(value)) {
+            throw new Error('Key "toolbar": Key "menus" must be a array.');
+          }
+          if (!value.includes("base")) {
+            throw new Error('Key "toolbar": Key "menus" should at least contain "base".');
+          }
+          if (!value.every((item) => defaultMenus.includes(item))) {
+            throw new Error(`Key "toolbar": Key "menus" the array items of toolbar.menus must contain only one or multiple of ${JSON.stringify(defaultMenus)}.`);
+          }
+        }
+      },
+      disableMenuItems: {
+        merge: "replace",
+        validate(value) {
+          if (value && !Array.isArray(value)) {
+            throw new Error('Key "toolbar": Key "disableMenuItems" must be a array.');
+          }
+        }
+      }
+    }
+  },
+  page: {
+    schema: {
+      defaultMargin: {
+        schema: {
+          left: {
+            merge: "replace",
+            validate: "number"
+          },
+          right: {
+            merge: "replace",
+            validate: "number"
+          },
+          top: {
+            merge: "replace",
+            validate: "number"
+          },
+          bottom: {
+            merge: "replace",
+            validate: "number"
+          }
+        }
+      },
+      defaultOrientation: {
+        merge: "replace",
+        validate(value) {
+          if (value && !["horizontal", "vertical"].includes(value)) {
+            throw new Error('Key "page": Key "defaultOrientation" must be one of "horizontal" or "vertical".');
+          }
+        }
+      },
+      defaultBackground: {
+        merge: "replace",
+        validate: "string"
+      },
+      showBreakMarks: {
+        merge: "replace",
+        validate: "boolean"
+      },
+      watermark: {
+        schema: {
+          type: {
+            merge: "replace",
+            validate(value) {
+              if (value && !["compact", "spacious"].includes(value)) {
+                throw new Error('Key "watermark": Key "type" must be one of "compact" or "spacious".');
+              }
+            }
+          },
+          alpha: {
+            merge: "replace",
+            validate: "number"
+          },
+          fontColor: {
+            merge: "replace",
+            validate: "string"
+          },
+          fontFamily: {
+            merge: "replace",
+            validate(value) {
+              if (value !== null && typeof value !== "string") {
+                throw new Error('Key "watermark": Key "fontFamily" must be a string.');
+              }
+            }
+          },
+          fontSize: {
+            merge: "replace",
+            validate: "number"
+          },
+          fontWeight: {
+            merge: "replace",
+            validate: "string"
+          },
+          text: {
+            merge: "replace",
+            validate: "string"
+          }
+        }
+      }
+    }
+  },
+  document: {
+    schema: {
+      title: {
+        merge: "replace",
+        validate: "string"
+      },
+      content: {
+        merge: "replace",
+        validate() {}
+      },
+      placeholder: {
+        merge: "replace",
+        validate: "string"
+      },
+      enableSpellcheck: {
+        merge: "replace",
+        validate: "boolean"
+      },
+      enableMarkdown: {
+        merge: "replace",
+        validate: "boolean"
+      },
+      enableBubbleMenu: {
+        merge: "replace",
+        validate: "boolean"
+      },
+      enableBlockMenu: {
+        merge: "replace",
+        validate: "boolean"
+      },
+      readOnly: {
+        merge: "replace",
+        validate: "boolean"
+      },
+      autofocus: {
+        merge: "replace",
+        validate: "boolean"
+      },
+      characterLimit: {
+        merge: "replace",
+        validate: "number"
+      },
+      typographyRules: {
+        merge: "replace",
+        validate: "object"
+      },
+      autoSave: {
+        schema: {
+          enabled: {
+            merge: "replace",
+            validate: "boolean"
+          },
+          interval: {
+            merge: "replace",
+            validate: "number"
+          }
+        }
+      }
+    }
+  },
+  shareUrl: { merge: "replace", validate: "string" },
+  templates: {
+    merge: "replace",
+    validate(value) {
+      if (value && !Array.isArray(value)) {
+        throw new Error('Key "templates": Key "menus" must be a array.');
+      }
+      value.forEach((item, index) => {
+        if (!item.title || !item.title === "") {
+          throw new Error(`Key "templates[${index}]": Key "title" cannot be empty.`);
+        }
+        if (!item.content || !item.content === "") {
+          throw new Error(`Key "templates[${index}]": Key "content" cannot be empty.`);
+        }
+      });
+    }
+  },
+  cdnUrl: {
+    merge: "replace",
+    validate: "string"
+  },
+  diagrams: {
+    merge: "assign",
+    validate: "object"
+  },
+  file: {
+    schema: {
+      allowedMimeTypes: {
+        merge: "replace",
+        validate: "array"
+      },
+      maxSize: {
+        merge: "replace",
+        validate: "number"
+      },
+      onUpload: {
+        merge: "replace",
+        validate(value) {
+          if (value.constructor.name !== "AsyncFunction") {
+            throw new Error('Key "upload": Key "onUpload" must be a async function.');
+          }
+        }
+      },
+      onDelete: {
+        merge: "replace",
+        validate(value) {
+          if (typeof value !== "function" && value.constructor.name !== "AsyncFunction") {
+            throw new Error('Key "upload": Key "onDelete" must be a function.');
+          }
+        }
+      }
+    }
+  },
+  extensions: {
+    merge: "replace",
+    validate: "array"
+  },
+  onSave: {
+    merge: "replace",
+    validate(value) {
+      if (value.constructor.name !== "AsyncFunction" && value instanceof Promise) {
+        throw new Error('Key "document": Key "saveNethod" must be a async function.');
+      }
+    }
+  },
+  onFileUpload: {
+    merge: "replace",
+    validate(value) {
+      if (value.constructor.name !== "AsyncFunction") {
+        throw new Error('Key "upload": Key "onUpload" must be a async function.');
+      }
+    }
+  },
+  onFileDelete: {
+    merge: "replace",
+    validate(value) {
+      if (typeof value !== "function" && value.constructor.name !== "AsyncFunction") {
+        throw new Error('Key "upload": Key "onDelete" must be a function.');
+      }
+    }
+  }
+});
+
+export { defaultOptions, propsOptions, ojbectSchema };
diff --git a/src/components_umo/statusbar/index.vue b/src/components_umo/statusbar/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4573bb44c5c1939865d5680562ec8ec52270309b
--- /dev/null
+++ b/src/components_umo/statusbar/index.vue
@@ -0,0 +1,473 @@
+<template>
+  <div v-if="!page.preview.enabled" class="status-bar">
+    <div class="bar-left">
+      <tooltip :content="page.showToc ? '隐藏大纲' : '显示大纲'">
+        <t-button
+          class="bar-button"
+          :class="{ active: page.showToc }"
+          variant="text"
+          size="small"
+          @click="page.showToc = !page.showToc"
+        >
+          <icon name="toc" color="red" />
+        </t-button>
+      </tooltip>
+      <tooltip
+        v-if="options.document.enableSpellcheck"
+        :content="$document.spellcheck ? '关闭拼写检查' : '开启拼写检查'"
+      >
+        <t-button
+          class="bar-button"
+          :class="{ active: $document.spellcheck }"
+          variant="text"
+          size="small"
+          @click="$document.spellcheck = !$document.spellcheck"
+        >
+          <icon name="spellcheck" color="red" />
+        </t-button>
+      </tooltip>
+      <!-- <tooltip
+        :content="page.pageBreak ? '退出分页模式' : '进入分页模式'"
+      >
+        <t-button
+          class="bar-button"
+          :class="{ active: page.pageBreak }"
+          variant="text"
+          size="small"
+          @click="page.pageBreak=!page.pageBreak"
+        >
+          <icon name="page-break" />
+        </t-button>
+      </tooltip> -->
+      <tooltip content="快捷键">
+        <t-button
+          class="bar-button"
+          variant="text"
+          size="small"
+          @click="showShortcut = true"
+        >
+          <icon name="shortcut" />
+        </t-button>
+      </tooltip>
+      <tooltip content="重置编辑器">
+        <t-button class="bar-button" variant="text" size="small" @click="reset">
+          <icon name="clear-cache" />
+        </t-button>
+      </tooltip>
+      <div class="bar-split"></div>
+      <tooltip content="由「有墨文档」提供技术支持">
+        <t-button
+          class="bar-button"
+          variant="text"
+          size="small"
+          href="https://umodoc.com"
+          target="_blank"
+        >
+          <icon name="home-page" />
+        </t-button>
+      </tooltip>
+      <tooltip content="使用感受和建议反馈">
+        <t-button
+          class="bar-button"
+          variant="text"
+          size="small"
+          href="https://github.com/umodoc/editor/issues"
+          target="_blank"
+        >
+          <icon name="message" />
+        </t-button>
+      </tooltip>
+      <div class="bar-split"></div>
+      <div class="simple-text word-count" v-if="editor">
+        已输入 {{ editor.storage.characterCount.characters() }} 字符，{{
+          options.document.characterLimit > 0
+            ? `总计不能超过 ${options.document.characterLimit} 字符，`
+            : ''
+        }}已选中 {{ selectionCharacters }} 字符
+      </div>
+    </div>
+    <div class="bar-right">
+      <tooltip
+        :content="`${page.preview.enabled ? '退出演示' : '演示模式 '} (F5)`"
+      >
+        <t-button
+          class="bar-button"
+          :class="{ active: page.preview.enabled }"
+          variant="text"
+          size="small"
+          @click="togglePreview"
+        >
+          <icon name="preview" />
+        </t-button>
+      </tooltip>
+      <tooltip
+        :content="`${fullscreen.isFullscreen ? '退出全屏' : '全屏模式'} (F11 / ⌘+F11)`"
+      >
+        <t-button
+          class="bar-button"
+          variant="text"
+          size="small"
+          @click="fullscreen.toggle"
+        >
+          <icon
+            :name="fullscreen.isFullscreen ? 'full-screen-exit' : 'full-screen'"
+          />
+        </t-button>
+      </tooltip>
+      <div class="bar-split"></div>
+      <div class="zoom-level-bar">
+        <tooltip :content="`减小缩放 (${getShortcut('Ctrl-')})`">
+          <t-button
+            class="bar-button"
+            variant="text"
+            size="small"
+            :disabled="page.zoomLevel <= 20"
+            @click="zoomOut"
+          >
+            <icon name="minus" />
+          </t-button>
+        </tooltip>
+        <t-slider
+          v-model="page.zoomLevel"
+          :min="20"
+          :max="500"
+          :step="10"
+          :tooltip-props="{
+            showArrow: false,
+            theme: 'light',
+            popperOptions: {
+              modifiers: [{ name: 'offset', options: { offset: [0, 2] } }],
+            },
+          }"
+          label="当前缩放比例: ${value}%%"
+        />
+        <tooltip :content="`增加缩放 (${getShortcut('Ctrl+')})`">
+          <t-button
+            class="bar-button"
+            variant="text"
+            size="small"
+            :disabled="page.zoomLevel >= 500"
+            @click="zoomIn"
+          >
+            <icon name="plus" />
+          </t-button>
+        </tooltip>
+        <tooltip :content="`最佳宽度 (${getShortcut('Ctrl0')})`">
+          <t-button
+            class="bar-button"
+            :class="{ active: page.autoWidth }"
+            variant="text"
+            size="small"
+            @click="autoWidth(true)"
+          >
+            <icon name="auto-width" />
+          </t-button>
+        </tooltip>
+        <tooltip :content="`点击快速设置为 100% (${getShortcut('Ctrl1')})`">
+          <t-button
+            class="bar-button zoom-button"
+            variant="text"
+            size="small"
+            @click="zoomReset"
+          >
+            {{ page.zoomLevel }}%
+          </t-button>
+        </tooltip>
+      </div>
+    </div>
+  </div>
+  <div v-else class="preview-bar">
+    <div
+      class="item"
+      :class="{ active: page.preview.laserPointer }"
+      @click="page.preview.laserPointer = !page.preview.laserPointer"
+    >
+      <icon name="laser-pointer" />
+      激光笔
+    </div>
+    <div class="item" @click="togglePreview">
+      <icon name="exit" />
+      退出
+    </div>
+  </div>
+  <t-drawer
+    v-model:visible="showShortcut"
+    :attach="container"
+    size="320px"
+    :footer="false"
+    close-btn
+    destroy-on-close
+    show-in-attached-element
+  >
+    <template #header>
+      <div class="shortcut-drawer-header">
+        <icon name="shortcut" />
+        快捷键列表
+      </div>
+    </template>
+    <statusbar-shortcuts />
+  </t-drawer>
+</template>
+
+<script setup>
+import getShortcut from '@/utils/shortcut'
+
+const { container, options, page, editor } = useStore()
+const $document = useState('document')
+
+// 快捷键抽屉
+const showShortcut = $ref(false)
+
+const reset = inject('reset')
+
+// 字数统计
+const selectionCharacters = computed(() => {
+  const { state } = editor.value
+  if (state) {
+    const { selection } = state
+    const text = state.doc.textBetween(selection.from, selection.to, '')
+    return text.length
+  }
+  return 0
+})
+
+// 页面全屏
+let fullscreen = $ref({})
+onMounted(() => {
+  fullscreen = useFullscreen(document.querySelector(container))
+  useHotkeys('f11, command+f11', fullscreen.toggle)
+})
+
+// 演示模式
+const togglePreview = async () => {
+  page.value.showToc = false
+  page.value.preview.enabled = !page.value.preview.enabled
+  if (page.value.preview.enabled) {
+    document.querySelector(`${container} .zoomable-container`).scrollTop = 0
+  }
+}
+onMounted(() => useHotkeys('f5', togglePreview))
+watch(
+  () => page.value.preview.enabled,
+  (val) => {
+    if (val) {
+      fullscreen.enter()
+      autoWidth(false, 10)
+    } else {
+      fullscreen.exit()
+      zoomReset()
+    }
+  },
+)
+watch(
+  () => fullscreen.isFullscreen,
+  (val) => {
+    if (!val) page.value.preview.enabled = false
+  },
+  { deep: true },
+)
+
+// 页面缩放
+const zoomIn = () => {
+  if (page.value.zoomLevel < 500) {
+    page.value.zoomLevel = page.value.zoomLevel + 10
+    page.value.autoWidth = false
+  }
+}
+const zoomOut = () => {
+  if (page.value.zoomLevel > 20) {
+    page.value.zoomLevel = page.value.zoomLevel - 10
+    page.value.autoWidth = false
+  }
+}
+const zoomReset = () => {
+  page.value.zoomLevel = 100
+  page.value.autoWidth = false
+}
+useHotkeys('ctrl+-,command+-', zoomOut)
+useHotkeys('ctrl+=,command+=', zoomIn)
+useHotkeys('ctrl+1,command+1', zoomReset)
+
+// 最佳宽度
+const autoWidth = (auto, padding = 50) => {
+  if (auto && page.value.autoWidth) {
+    zoomReset()
+    return
+  }
+  try {
+    const editorEl = document.querySelector(`${container} .zoomable-container`)
+    const pageEl = editorEl.querySelector('.page-content')
+    const editorWidth = editorEl.clientWidth
+    const pageWidth = pageEl.clientWidth
+    page.value.zoomLevel = parseInt(
+      ((editorWidth - padding * 2) / pageWidth) * 100,
+    )
+    page.value.autoWidth = true
+  } catch (e) {
+    page.value.autoWidth = false
+    useMessage('error', '页面自动宽度计算出错')
+    console.warn('Page auto width calculation error', e)
+  }
+}
+useHotkeys('ctrl+0,command+0', autoWidth)
+
+watch(
+  () => page.value.showToc,
+  () => {
+    if (page.value.autoWidth) autoWidth()
+  },
+)
+</script>
+
+<style lang="less" scoped>
+.status-bar {
+  padding: 6px 10px;
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--umo-font-size-small);
+  border-top: solid 1px var(--umo-border-color);
+
+  @media screen and (max-width: 640px) {
+    overflow-x: auto;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  .bar-split {
+    height: 16px;
+    width: 1px;
+    background-color: var(--umo-border-color);
+    margin: 0 10px;
+  }
+  .bar-button {
+    --td-comp-size-xs: 18px;
+    --td-comp-paddingLR-l: 8px;
+    --td-radius-default: 2px;
+    font-size: 14px;
+    margin: 0 4px;
+    &:not(.zoom) {
+      width: var(--td-comp-size-xs);
+    }
+    :deep(.umo-button__text) {
+      padding: 0 5px;
+    }
+    &.active {
+      background-color: var(--umo-button-hover-background);
+      border-color: var(--umo-button-hover-background);
+      color: var(--umo-primary-color);
+    }
+  }
+  .bar-left {
+    display: flex;
+    align-items: center;
+    .word-count {
+      @media screen and (max-width: 960px) {
+        display: none;
+      }
+    }
+  }
+
+  .bar-right {
+    display: flex;
+    align-items: center;
+    .zoom-level-bar {
+      width: 240px;
+      display: flex;
+      --td-comp-size-xxxs: 8px;
+      --td-size-2: 3px;
+      --td-brand-color: var(--umo-text-color);
+      :deep(.umo-slider__button) {
+        background: var(--td-brand-color);
+        border: none;
+        box-shadow: none;
+      }
+      :deep(.umo-slider__track) {
+        background: none;
+      }
+    }
+
+    .zoom-button {
+      font-size: var(--umo-font-size-small);
+      width: 64px;
+    }
+  }
+}
+.preview-bar {
+  position: absolute;
+  right: 50px;
+  bottom: 50px;
+  border-radius: 10px;
+  padding: 10px;
+  overflow: hidden;
+  cursor: pointer;
+  user-select: none;
+  &::before {
+    position: absolute;
+    content: '';
+    display: block;
+    left: -20px;
+    right: -20px;
+    top: -20px;
+    bottom: -20px;
+    background-color: rgba(0, 0, 0, 0.3);
+    filter: blur(3px);
+    z-index: 0;
+  }
+  .item {
+    color: var(--umo-color-white);
+    padding: 10px 12px;
+    border-radius: 8px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+    &:not(:last-child) {
+      margin-bottom: 8px;
+    }
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+    &.active {
+      background-color: var(--umo-primary-color);
+    }
+    :deep(.icon) {
+      font-size: 24px;
+      margin-bottom: 5px;
+    }
+  }
+}
+</style>
+
+<style lang="less">
+.editor-powerby {
+  font-size: var(--umo-font-size-small);
+  a {
+    text-decoration: none;
+    color: var(--umo-text-color);
+    &:hover {
+      color: var(--umo-primary-color);
+      text-decoration: underline;
+    }
+  }
+}
+.umo-editor-container.preview-mode {
+  .zoomable-container {
+    padding: 10px !important;
+  }
+}
+.shortcut-drawer-header {
+  display: flex;
+  align-items: center;
+  font-weight: 400;
+  color: var(--umo-text-color);
+  .icon {
+    font-size: 20px;
+    margin-right: 6px;
+  }
+}
+.umo-drawer__close-btn {
+  margin-right: 3px;
+}
+</style>
diff --git a/src/components_umo/statusbar/shortcuts.vue b/src/components_umo/statusbar/shortcuts.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e8b1eb05d88017f833e4d387bb4c7bc6a3388370
--- /dev/null
+++ b/src/components_umo/statusbar/shortcuts.vue
@@ -0,0 +1,263 @@
+<template>
+  <div class="keyboard-shortcuts">
+    <template v-for="(group, index) in shortcuts" :key="index">
+      <div class="keyboard-shortcuts-title">{{ group.title }}</div>
+      <ul class="keyboard-shortcuts">
+        <li v-for="(item, i) in group.items" :key="i">
+          <span
+            :class="item.className ? 'keyboard-shortcut-' + item.className : ''"
+          >
+            <icon v-if="item.icon" :name="item.icon" />
+            <span v-else-if="item.html" class="icon" v-html="item.html"> </span>
+            <component v-if="item.tag" :is="item.tag">{{
+              item.label
+            }}</component>
+            <span v-else :class="item.className || ''">{{ item.label }}</span>
+          </span>
+          <div class="keyboard-shortcut">
+            <template v-for="key in item.keys" :key="key">
+              <kbd v-if="key !== 'TEXT'">{{ getShortcut(key) }}</kbd>
+              <span v-else>文字</span>
+            </template>
+          </div>
+        </li>
+      </ul>
+    </template>
+  </div>
+</template>
+
+<script setup>
+// https://ckeditor.com/docs/ckeditor5/latest/features/keyboard-support.html#related-productivity-features
+import getShortcut from '@/utils/shortcut'
+
+const $document = useState('document')
+
+const shortcuts = $ref([
+  {
+    title: '常用快捷键',
+    items: [
+      { label: '复制', keys: ['Ctrl', 'C'] },
+      { label: '粘贴', keys: ['Ctrl', 'V'] },
+      { label: '粘贴纯文本', keys: ['Ctrl', 'Shift', 'V'] },
+      { label: '撤销', keys: ['Ctrl', 'Z'] },
+      { label: '重做', keys: ['Ctrl', 'Y'] },
+      { label: '全选', keys: ['Ctrl', 'A'] },
+      { label: '查找 / 替换', keys: ['Ctrl', 'F'] },
+      { label: '插入新段落', keys: ['Enter'] },
+      { label: '换行', keys: ['Shift', 'Enter'] },
+      { label: '保存', keys: ['Ctrl', 'S'] },
+      { label: '打印', keys: ['Ctrl', 'P'] },
+    ],
+  },
+  {
+    title: '文字格式',
+    items: [
+      { icon: 'bold', tag: 'b', label: '粗体', keys: ['Ctrl', 'B'] },
+      { icon: 'italic', tag: 'i', label: '斜体', keys: ['Ctrl', 'I'] },
+      { icon: 'underline', tag: 'u', label: '下划线', keys: ['Ctrl', 'U'] },
+      {
+        icon: 'strike',
+        tag: 's',
+        label: '删除线',
+        keys: ['Ctrl', 'Shift', 'X'],
+      },
+      { icon: 'indent', label: '减少缩进', keys: ['Shift', 'Tab'] },
+      { icon: 'outdent', label: '增加缩进', keys: ['Tab'] },
+    ],
+  },
+  {
+    title: '页面显示',
+    items: [
+      { label: '插入分页', keys: ['Ctrl', 'Enter'] },
+      { label: '页面放大', keys: ['Ctrl', '+'] },
+      { label: '页面缩小', keys: ['Ctrl', '-'] },
+      { label: '缩放到初始比例', keys: ['Ctrl', '1'] },
+      { label: '缩放到最佳比例', keys: ['Ctrl', '0'] },
+      { label: '演示模式', keys: ['F5'] },
+      { label: '全屏模式', keys: ['F11'] },
+    ],
+  },
+])
+
+if ($document.value.markdown) {
+  shortcuts.push({
+    title: 'Markdown 格式',
+    items: [
+      {
+        html: 'H<sub>1</sub>',
+        tag: 'b',
+        className: 'heading1',
+        label: '标题1',
+        keys: ['#', '⎵'],
+      },
+      {
+        html: 'H<sub>2</sub>',
+        tag: 'b',
+        className: 'heading2',
+        label: '标题2',
+        keys: ['##', '⎵'],
+      },
+      {
+        html: 'H<sub>3</sub>',
+        tag: 'b',
+        className: 'heading3',
+        label: '标题3',
+        keys: ['###', '⎵'],
+      },
+      {
+        html: 'H<sub>4</sub>',
+        tag: 'b',
+        className: 'heading4',
+        label: '标题4',
+        keys: ['####', '⎵'],
+      },
+      {
+        html: 'H<sub>5</sub>',
+        tag: 'b',
+        className: 'heading5',
+        label: '标题5',
+        keys: ['#####', '⎵'],
+      },
+      {
+        html: 'H<sub>6</sub>',
+        tag: 'b',
+        className: 'heading6',
+        label: '标题6',
+        keys: ['######', '⎵'],
+      },
+      { icon: 'bold', tag: 'b', label: '粗体', keys: ['**', 'TEXT', '**'] },
+      { icon: 'italic', tag: 'i', label: '斜体', keys: ['*', 'TEXT', '*'] },
+      {
+        icon: 'strike',
+        tag: 's',
+        label: '删除线',
+        keys: ['~~', 'TEXT', '~~'],
+      },
+      {
+        icon: 'subscript',
+        tag: 'sub',
+        label: '下标',
+        keys: ['~', 'TEXT', '~'],
+      },
+      {
+        icon: 'superscript',
+        tag: 'sup',
+        label: '上标',
+        keys: ['^', 'TEXT', '^'],
+      },
+      { icon: 'bullet-list', label: '· 无序列表', keys: ['*', '⎵'] },
+      { icon: 'ordered-list', label: '1. 有序列表', keys: ['1.', '⎵'] },
+      { icon: 'task', label: '待办事项', keys: ['[ ]', '⎵'] },
+      { icon: 'quote', tag: 'blockquote', label: '引用', keys: ['>', '⎵'] },
+      { icon: 'code', tag: 'code', label: '代码', keys: ['`', 'TEXT', '`'] },
+      {
+        icon: 'mathematics',
+        label: '数学公式',
+        keys: ['$', 'TEXT', '$'],
+      },
+      {
+        icon: 'highlight',
+        tag: 'mark',
+        label: '文本高亮',
+        keys: ['==', 'TEXT', '=='],
+      },
+      { icon: 'horizontal-line', label: '分割线', keys: ['---', 'Enter'] },
+    ],
+  })
+}
+</script>
+
+<style lang="less" scoped>
+.keyboard-shortcuts-title {
+  margin: 0 0 10px 0;
+  font-size: 12px;
+  &:not(:first-child) {
+    margin-top: 20px;
+  }
+}
+.keyboard-shortcuts {
+  li {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 10px;
+    font-size: 12px;
+    color: var(--umo-text-color);
+    &:not(:last-child) {
+      border-bottom: solid 1px var(--umo-border-color);
+    }
+    line-height: 1.4;
+    span {
+      display: flex;
+      align-items: center;
+      .icon {
+        margin: 0 10px 0 -2px;
+      }
+      sub {
+        transform: translateY(3px);
+      }
+      sup {
+        transform: translateY(-3px);
+      }
+      span.icon {
+        font-weight: 700;
+        margin-right: 8px;
+        :deep(sub) {
+          font-size: 6px;
+          margin-top: 4px;
+          color: var(--umo-primary-color);
+        }
+      }
+    }
+    .keyboard-shortcut {
+      display: flex;
+      align-items: center;
+      kbd {
+        border: solid 1px var(--umo-border-color);
+        padding: 0 5px;
+        border-radius: 3px;
+        color: var(--umo-text-color);
+        background-color: var(--umo-button-hover-background);
+        margin: 0 3px;
+        border-bottom-width: 2px;
+      }
+      &-heading1 b {
+        font-size: 20px;
+      }
+      &-heading2 b {
+        font-size: 18px;
+      }
+      &-heading3 b {
+        font-size: 16px;
+      }
+      &-heading4 b {
+        font-size: 14px;
+      }
+      &-heading5 b {
+        font-size: 12px;
+      }
+      &-heading6 b {
+        font-size: 10px;
+      }
+    }
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.01);
+      .keyboard-shortcut kbd {
+        border-color: var(--umo-text-color);
+      }
+    }
+  }
+  blockquote {
+    padding-left: 10px;
+    border-left: solid 3px var(--umo-border-color);
+  }
+  code {
+    border: solid 1px var(--umo-border-color);
+    border-radius: 3px;
+    background-color: var(--umo-button-hover-background);
+    padding: 0 5px;
+    display: inline;
+  }
+}
+</style>
diff --git a/src/components_umo/toolbar/classic.vue b/src/components_umo/toolbar/classic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..841fe97ffde7d9e38b920a269c6192a506dff298
--- /dev/null
+++ b/src/components_umo/toolbar/classic.vue
@@ -0,0 +1,261 @@
+<template>
+  <toolbar-scrollable ref="scrollableRef" class="scrollable-container">
+    <div class="classic-menu">
+      <div v-if="menus.length > 1" class="virtual-group">
+        <t-select
+          v-model="currentMenu"
+          :popup-props="{
+            destroyOnClose: true,
+            attach: container,
+          }"
+          size="small"
+          auto-width
+          borderless
+          @change="toggoleMenu"
+        >
+          <template #prefixIcon>
+            <icon name="menu" />
+          </template>
+          <t-option
+            v-for="item in menus"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </t-select>
+      </div>
+      <template v-if="currentMenu === 'base'">
+        <div class="virtual-group">
+          <menus-toolbar-base-undo />
+          <menus-toolbar-base-redo />
+          <menus-toolbar-base-select-all />
+          <menus-toolbar-base-clear-format />
+        </div>
+        <div class="virtual-group">
+          <menus-toolbar-base-heading />
+          <menus-toolbar-base-font-family borderless />
+          <menus-toolbar-base-font-size borderless />
+          <menus-toolbar-base-bold />
+          <menus-toolbar-base-italic />
+          <menus-toolbar-base-underline />
+          <menus-toolbar-base-strike />
+          <menus-toolbar-base-subscript />
+          <menus-toolbar-base-superscript />
+          <menus-toolbar-base-color />
+          <menus-toolbar-base-background-color />
+          <menus-toolbar-base-highlight />
+        </div>
+        <div class="virtual-group">
+          <menus-toolbar-base-ordered-list />
+          <menus-toolbar-base-bullet-list />
+          <!-- <menus-toolbar-base-task-list /> -->
+          <menus-toolbar-base-outdent />
+          <menus-toolbar-base-indent />
+          <menus-toolbar-base-line-height />
+          <menus-toolbar-base-align-dropdown />
+          <!-- <menus-toolbar-base-quote /> -->
+          <!-- <menus-toolbar-base-code v-if="!disableItem('code')" /> -->
+        </div>
+        <div class="virtual-group">
+          <!-- <menus-toolbar-base-markdown /> -->
+          <menus-toolbar-base-search-replace />
+        </div>
+        <div class="virtual-group">
+          <menus-toolbar-base-print v-if="!disableItem('print')" />
+        </div>
+      </template>
+      <template v-if="currentMenu === 'insert'">
+        <div class="virtual-group">
+          <menus-toolbar-insert-link />
+          <menus-toolbar-insert-image />
+          <menus-toolbar-insert-video v-if="!disableItem('video')" />
+          <menus-toolbar-insert-audio v-if="!disableItem('audio')" />
+          <menus-toolbar-insert-file v-if="!disableItem('file')" />
+          <menus-toolbar-insert-code-block v-if="!disableItem('code')" />
+          <menus-toolbar-insert-special-characters />
+          <menus-toolbar-insert-date />
+          <menus-toolbar-insert-emoji v-if="!disableItem('emoji')" />
+          <menus-toolbar-insert-mathematics
+            v-if="!disableItem('mathematics')"
+          />
+        </div>
+        <div class="virtual-group">
+          <menus-toolbar-insert-hard-break />
+          <menus-toolbar-insert-horizontal-line />
+          <menus-toolbar-insert-toc />
+          <menus-toolbar-insert-text-box />
+        </div>
+        <div class="virtual-group">
+          <menus-toolbar-insert-template />
+          <menus-toolbar-insert-web-page />
+        </div>
+      </template>
+      <template v-if="currentMenu === 'table'">
+        <div class="virtual-group">
+          <menus-toolbar-table-insert />
+          <menus-toolbar-table-fix />
+        </div>
+        <div class="virtual-group">
+          <menus-toolbar-table-cells-align />
+          <menus-toolbar-table-cells-background />
+          <!-- <menus-toolbar-table-border-color /> -->
+        </div>
+        <div class="virtual-group">
+          <menus-toolbar-table-add-row-before :huge="false" />
+          <menus-toolbar-table-add-row-after :huge="false" />
+          <menus-toolbar-table-add-column-before :huge="false" />
+          <menus-toolbar-table-add-column-after :huge="false" />
+        </div>
+        <div class="virtual-group">
+          <menus-toolbar-table-delete-row :huge="false" />
+          <menus-toolbar-table-delete-column :huge="false" />
+        </div>
+        <div class="virtual-group">
+          <menus-toolbar-table-merge-cells :huge="false" />
+          <menus-toolbar-table-split-cell :huge="false" />
+        </div>
+        <div class="virtual-group">
+          <menus-toolbar-table-toggle-header-row :huge="false" />
+          <menus-toolbar-table-toggle-header-column :huge="false" />
+          <menus-toolbar-table-toggle-header-cell :huge="false" />
+        </div>
+        <div class="virtual-group">
+          <menus-toolbar-table-next-cell :huge="false" />
+          <menus-toolbar-table-previous-cell :huge="false" />
+        </div>
+        <div class="virtual-group">
+          <menus-toolbar-table-delete />
+        </div>
+      </template>
+      <template v-if="currentMenu === 'tools'">
+        <div class="virtual-group">
+          <!-- <menus-toolbar-tools-qrcode /> -->
+          <!-- <menus-toolbar-tools-barcode /> -->
+        </div>
+        <div class="virtual-group">
+          <!-- <menus-toolbar-tools-signature v-if="!disableItem('signature')" /> -->
+          <!-- <menus-toolbar-tools-seal v-if="!disableItem('seal')" /> -->
+        </div>
+        <div class="virtual-group">
+          <menus-toolbar-tools-diagrams v-if="!disableItem('diagrams')" />
+          <!-- <menus-toolbar-tools-mind-map v-if="!disableItem('mind-map')" /> -->
+          <!-- <menus-toolbar-tools-mermaid v-if="!disableItem('mermaid')" /> -->
+        </div>
+        <div class="virtual-group">
+          <!-- <menus-toolbar-tools-chinese-case /> -->
+        </div>
+      </template>
+      <template v-if="currentMenu === 'page'">
+        <div class="virtual-group">
+          <menus-toolbar-page-toggle-toc />
+        </div>
+        <div class="virtual-group">
+          <div class="virtual-group-row">
+            <menus-toolbar-page-margin />
+            <menus-toolbar-page-size />
+            <menus-toolbar-page-orientation />
+          </div>
+        </div>
+        <!-- <div class="virtual-group">
+          <menus-toolbar-page-header />
+          <menus-toolbar-page-footer />
+        </div> -->
+        <div class="virtual-group">
+          <menus-toolbar-page-break />
+          <menus-toolbar-page-break-marks />
+          <menus-toolbar-page-line-number />
+          <menus-toolbar-page-watermark />
+          <menus-toolbar-page-background />
+        </div>
+        <div class="virtual-group">
+          <menus-toolbar-page-preview />
+        </div>
+      </template>
+      <template v-if="currentMenu === 'export'">
+        <div class="virtual-group">
+          <menus-toolbar-export-image />
+          <!-- <menus-toolbar-export-pdf /> -->
+          <menus-toolbar-export-html />
+          <menus-toolbar-export-text />
+        </div>
+        <div class="virtual-group">
+          <menus-toolbar-export-share v-if="!disableItem('share')" />
+          <menus-toolbar-export-embed v-if="!disableItem('embed')" />
+        </div>
+      </template>
+    </div>
+  </toolbar-scrollable>
+</template>
+
+<script setup>
+const props = defineProps({
+  menus: {
+    type: Array,
+    required: true,
+  },
+  currentMenu: {
+    type: String,
+    required: true,
+  },
+})
+const emits = defineEmits(['menu-change'])
+
+const { container, options } = useStore()
+const disableItem = (name) => {
+  return options.value.toolbar.disableMenuItems.includes(name)
+}
+
+// eslint-disable-next-line vue/no-dupe-keys
+let currentMenu = $ref('')
+watch(
+  () => props.currentMenu,
+  async (val) => {
+    currentMenu = val
+    await nextTick()
+    try {
+      scrollableRef.update()
+    } catch {}
+  },
+  { immediate: true },
+)
+const scrollableRef = $ref()
+const toggoleMenu = async (menu) => {
+  emits('menu-change', menu)
+  await nextTick()
+  scrollableRef.update()
+}
+</script>
+
+<style lang="less" scoped>
+.scrollable-container {
+  padding: 10px;
+}
+.classic-menu {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  .virtual-group {
+    display: flex;
+    align-items: center;
+    &:empty {
+      display: none;
+    }
+    &:not(:last-child)::after {
+      content: '';
+      display: block;
+      height: 18px;
+      width: 1px;
+      background-color: var(--umo-border-color-light);
+      margin: 0 10px;
+    }
+    :deep(.menu-button .umo-button--shape-square) {
+      .icon {
+        font-size: 14px;
+      }
+    }
+    &-row {
+      display: flex;
+    }
+  }
+}
+</style>
diff --git a/src/components_umo/toolbar/index.vue b/src/components_umo/toolbar/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2c1ca7324213dae2d0722d6a96411b75bf8ca5cb
--- /dev/null
+++ b/src/components_umo/toolbar/index.vue
@@ -0,0 +1,259 @@
+<template>
+  <div v-if="$toolbar.show" class="toolbar-container">
+    <toolbar-ribbon v-if="$toolbar.mode === 'ribbon'" :menus="toolbarMenus" :current-menu="currentMenu" @menu-change="menuChange" />
+    <toolbar-classic v-if="$toolbar.mode === 'classic'" :menus="toolbarMenus" :current-menu="currentMenu" @menu-change="menuChange" />
+    <toolbar-source v-if="$toolbar.mode === 'source' && options.toolbar.enableSourceEditor" />
+    <div class="toolbar-actions" :class="$toolbar.mode">
+      <t-popup v-if="$toolbar.mode !== 'source' && editor?.isEditable" :attach="container" trigger="click" placement="bottom-right" @visible-change="(visible) => (statusPopup = visible)">
+        <t-button class="button" variant="text" size="small" :class="{ active: statusPopup }">
+          <span class="status">
+            <span class="status-online" :class="{ offline: !online }"></span>
+            <span class="status-saved button-text">
+              <span v-if="savedAt"> {{ timeAgo(savedAt) }}保存</span>
+              <span class="unsaved" v-else>文档未保存</span>
+            </span>
+          </span>
+        </t-button>
+        <template #content>
+          <div class="document-status-container status">
+            <div>网络状态： {{ online ? "在线" : "离线" }}</div>
+            <div>
+              保存时间：
+              <span v-if="savedAt"> {{ timeAgo(savedAt) }}保存</span>
+              <span v-else>未保存</span>
+            </div>
+            <div class="document-button-container">
+              <t-button size="small" @click="saveContent">保存文档</t-button>
+              <t-button size="small" variant="outline" @click="setContentFromCache"> 从缓存中恢复 </t-button>
+            </div>
+          </div>
+        </template>
+      </t-popup>
+      <t-dropdown
+        trigger="click"
+        size="small"
+        placement="bottom-right"
+        :popup-props="{
+          destroyOnClose: true,
+          attach: container
+        }"
+        @click="toggleToolbarMode"
+      >
+        <t-button class="button" variant="text" size="small">
+          <icon name="expand-down" />
+          <span class="button-text">切换工具栏</span>
+        </t-button>
+        <template #dropdown>
+          <t-dropdown-menu v-for="item in editorModeOptions" :key="item.value" :content="item.label" :value="item.value" :divider="item.divider" :active="item.value === $toolbar.mode">
+            <template #prefixIcon>
+              <icon :name="item.prefixIcon" />
+            </template>
+          </t-dropdown-menu>
+        </template>
+      </t-dropdown>
+    </div>
+  </div>
+  <tooltip v-else content="显示工具栏" placement="bottom-right">
+    <div class="show-toolbar" @click="$toolbar.show = true">
+      <icon name="arrow-down" />
+    </div>
+  </tooltip>
+</template>
+
+<script setup>
+import timeAgo from "@/utils/time-ago";
+
+const emits = defineEmits(["menu-change"]);
+const { container, options, editor, savedAt } = useStore();
+const $toolbar = useState("toolbar");
+const statusPopup = $ref(false);
+const online = useOnline();
+
+// 工具栏菜单
+const defaultToolbarMenus = [
+  { label: "开始", value: "base" },
+  { label: "插入", value: "insert" },
+  { label: "表格", value: "table" },
+  { label: "工具", value: "tools" }
+  // { label: '页面', value: 'page' },
+  // { label: '导出', value: 'export' },
+];
+let toolbarMenus = defaultToolbarMenus;
+if (options.value.toolbar.menus) {
+  toolbarMenus = options.value.toolbar.menus.map((item) => defaultToolbarMenus.filter((menu) => menu.value === item)[0]);
+}
+let currentMenu = $ref(toolbarMenus[0].value);
+const menuChange = (menu) => {
+  currentMenu = menu;
+  emits("menu-change", menu);
+};
+// 监听如果当前编辑元素为table则切换到table菜单
+watch(
+  () => editor.value?.isActive("table"),
+  (val, oldVal) => {
+    if (val) {
+      currentMenu = "table";
+    } else if (!val && oldVal) {
+      currentMenu = "base";
+    }
+  }
+);
+
+// 切换编辑器模式
+const editorModeOptions = computed(() => {
+  const modeOptions = [
+    {
+      label: "专业工具栏",
+      value: "ribbon",
+      prefixIcon: "toolbar-ribbon"
+    },
+    {
+      label: "经典工具栏",
+      value: "classic",
+      prefixIcon: "toolbar-classic"
+    },
+    {
+      label: "隐藏工具栏",
+      value: "hideToolbar",
+      prefixIcon: "hide-toolbar"
+    }
+  ];
+  if (options.value.toolbar.enableSourceEditor) {
+    modeOptions.splice(2, 0, {
+      label: "编辑源代码",
+      value: "source",
+      prefixIcon: "toolbar-source",
+      divider: true
+    });
+  }
+  return modeOptions;
+});
+
+const toggleToolbarMode = ({ value }) => {
+  if (value === "hideToolbar") {
+    $toolbar.value.show = false;
+  } else {
+    $toolbar.value.show = true;
+    $toolbar.value.mode = value;
+  }
+};
+
+// 保存文档
+const saveContent = inject("saveContent");
+
+// 从缓存中恢复文档
+const setContentFromCache = () => {
+  const document = useState("document");
+  const { content } = document.value;
+  if (!content || content === "" || content === "<p></p>") {
+    const dialog = useAlert({
+      theme: "info",
+      header: "错误提示",
+      body: "当前缓存中没有内容。",
+      placement: "center",
+      onConfirm() {
+        dialog.destroy();
+      }
+    });
+    return;
+  }
+  editor.value?.chain().setContent(content, true).focus().run();
+};
+</script>
+
+<style lang="less" scoped>
+.toolbar-container {
+  display: flex;
+  justify-content: space-between;
+  user-select: none;
+  border-bottom: solid 1px var(--umo-border-color);
+  position: relative;
+}
+.toolbar-actions {
+  padding: 6px 10px;
+  display: flex;
+  align-items: center;
+  &.ribbon {
+    position: absolute;
+    right: 0;
+    top: 1px;
+  }
+  .button {
+    &.active {
+      background-color: var(--umo-button-hover-background);
+    }
+    &:not(:last-child) {
+      margin-right: 3px;
+    }
+    :deep(.umo-button__text) {
+      display: flex;
+      align-items: center;
+      .icon {
+        margin-right: 3px;
+      }
+    }
+  }
+  @media screen and (max-width: 640px) {
+    padding-left: 0;
+    .status-online {
+      margin-right: 0;
+    }
+    .button-text {
+      display: none;
+    }
+  }
+}
+.show-toolbar {
+  cursor: pointer;
+  position: absolute;
+  right: 20px;
+  font-size: 18px;
+  padding: 3px 6px;
+  z-index: 99;
+  background-color: var(--umo-color-white);
+  color: var(--umo-text-color-light);
+  border-bottom-left-radius: var(--umo-radius);
+  border-bottom-right-radius: var(--umo-radius);
+  border: solid 1px var(--umo-border-color);
+  border-top: none;
+  &:hover {
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.08);
+    color: var(--umo-primary-color);
+  }
+}
+.status {
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  &-online {
+    width: 10px;
+    height: 10px;
+    background: rgb(26, 187, 26);
+    border-radius: 50%;
+    &.offline {
+      background: rgb(187, 26, 26);
+    }
+  }
+  &-saved {
+    color: var(--umo-text-color-light);
+    margin-left: 5px;
+    .unsaved {
+      color: var(--umo-error-color);
+    }
+  }
+}
+.document-status-container {
+  flex-direction: column;
+  align-items: unset;
+  padding: 10px 15px;
+  color: var(--umo-text-color);
+  min-width: 150px;
+  cursor: default;
+  .document-button-container {
+    margin: 6px 0 4px;
+    display: flex;
+    gap: 6px;
+  }
+}
+</style>
diff --git a/src/components_umo/toolbar/ribbon.vue b/src/components_umo/toolbar/ribbon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a1c9429ca738cd0e37ee48c59b29417867651b59
--- /dev/null
+++ b/src/components_umo/toolbar/ribbon.vue
@@ -0,0 +1,316 @@
+<template>
+  <div class="ribbon-menu">
+    <div v-if="menus.length > 1" class="ribbon-tabs">
+      <div class="tabs-item" :class="{ active: currentMenu === item.value }" v-for="item in menus" :key="item.value" @click="changeMenu(item.value)">
+        {{ item.label }}
+      </div>
+    </div>
+    <toolbar-scrollable ref="scrollableRef" class="scrollable-container">
+      <div class="ribbon-container">
+        <template v-if="currentMenu === 'base'">
+          <div class="virtual-group">
+            <div class="virtual-group-row">
+              <menus-toolbar-base-undo />
+              <menus-toolbar-base-redo />
+            </div>
+            <div class="virtual-group-row">
+              <menus-toolbar-base-select-all />
+              <menus-toolbar-base-clear-format />
+            </div>
+          </div>
+          <div class="virtual-group">
+            <div class="virtual-group-row">
+              <menus-toolbar-base-font-family />
+              <menus-toolbar-base-font-size />
+            </div>
+            <div class="virtual-group-row">
+              <menus-toolbar-base-bold />
+              <menus-toolbar-base-italic />
+              <menus-toolbar-base-underline />
+              <menus-toolbar-base-strike />
+              <menus-toolbar-base-subscript />
+              <menus-toolbar-base-superscript />
+              <menus-toolbar-base-color />
+              <menus-toolbar-base-background-color />
+              <menus-toolbar-base-highlight />
+            </div>
+          </div>
+          <div class="virtual-group">
+            <div class="virtual-group-row">
+              <menus-toolbar-base-ordered-list />
+              <menus-toolbar-base-bullet-list />
+              <!-- <menus-toolbar-base-task-list /> -->
+              <menus-toolbar-base-outdent />
+              <menus-toolbar-base-indent />
+              <menus-toolbar-base-line-height />
+            </div>
+            <div class="virtual-group-row">
+              <menus-toolbar-base-align-left />
+              <menus-toolbar-base-align-center />
+              <menus-toolbar-base-align-right />
+              <menus-toolbar-base-align-justify />
+              <menus-toolbar-base-align-distributed />
+              <!-- <menus-toolbar-base-quote /> -->
+              <!-- <menus-toolbar-base-code v-if="!disableItem('code')" /> -->
+            </div>
+          </div>
+          <div class="virtual-group">
+            <menus-toolbar-base-heading />
+          </div>
+          <div class="virtual-group">
+            <!-- <menus-toolbar-base-markdown /> -->
+            <menus-toolbar-base-search-replace />
+          </div>
+          <div class="virtual-group">
+            <menus-toolbar-base-print v-if="!disableItem('print')" />
+          </div>
+        </template>
+        <template v-if="currentMenu === 'insert'">
+          <div class="virtual-group">
+            <menus-toolbar-insert-link />
+            <menus-toolbar-insert-image />
+            <menus-toolbar-insert-video v-if="!disableItem('video')" />
+            <menus-toolbar-insert-audio v-if="!disableItem('audio')" />
+            <menus-toolbar-insert-file v-if="!disableItem('file')" />
+            <menus-toolbar-insert-code-block v-if="!disableItem('code-block')" />
+            <menus-toolbar-insert-special-characters />
+            <menus-toolbar-insert-date />
+            <menus-toolbar-insert-emoji v-if="!disableItem('emoji')" />
+            <menus-toolbar-insert-mathematics v-if="!disableItem('mathematics')" />
+          </div>
+          <div class="virtual-group">
+            <menus-toolbar-insert-hard-break />
+            <menus-toolbar-insert-horizontal-line />
+            <menus-toolbar-insert-toc />
+            <menus-toolbar-insert-text-box />
+          </div>
+          <div class="virtual-group">
+            <menus-toolbar-insert-template />
+            <menus-toolbar-insert-web-page />
+          </div>
+        </template>
+        <template v-if="currentMenu === 'table'">
+          <div class="virtual-group">
+            <menus-toolbar-table-insert />
+            <menus-toolbar-table-fix />
+          </div>
+          <div class="virtual-group">
+            <menus-toolbar-table-cells-align />
+            <menus-toolbar-table-cells-background />
+            <!-- <menus-toolbar-table-border-color /> -->
+          </div>
+          <div class="virtual-group">
+            <div class="virtual-group-row">
+              <menus-toolbar-table-add-row-before />
+              <menus-toolbar-table-add-row-after />
+              <menus-toolbar-table-delete-row />
+            </div>
+            <div class="virtual-group-row">
+              <menus-toolbar-table-add-column-before />
+              <menus-toolbar-table-add-column-after />
+              <menus-toolbar-table-delete-column />
+            </div>
+          </div>
+          <div class="virtual-group">
+            <div class="virtual-group-row">
+              <menus-toolbar-table-merge-cells />
+            </div>
+            <div class="virtual-group-row">
+              <menus-toolbar-table-split-cell />
+            </div>
+          </div>
+          <div class="virtual-group">
+            <div class="virtual-group-row">
+              <menus-toolbar-table-toggle-header-row />
+              <menus-toolbar-table-toggle-header-column />
+            </div>
+            <div class="virtual-group-row">
+              <menus-toolbar-table-toggle-header-cell />
+            </div>
+          </div>
+          <div class="virtual-group">
+            <div class="virtual-group-row">
+              <menus-toolbar-table-next-cell />
+            </div>
+            <div class="virtual-group-row">
+              <menus-toolbar-table-previous-cell />
+            </div>
+          </div>
+          <div class="virtual-group">
+            <menus-toolbar-table-delete />
+          </div>
+        </template>
+        <!-- <template v-if="currentMenu === 'tools'">
+          <div class="virtual-group"> -->
+        <!-- <menus-toolbar-tools-qrcode />
+            <menus-toolbar-tools-barcode /> -->
+        <!-- </div>
+          <div class="virtual-group"> -->
+        <!-- <menus-toolbar-tools-signature v-if="!disableItem('signature')" />
+            <menus-toolbar-tools-seal v-if="!disableItem('seal')" /> -->
+        <!-- </div>
+          <div class="virtual-group">
+            <menus-toolbar-tools-diagrams v-if="!disableItem('diagrams')" /> -->
+        <!-- <menus-toolbar-tools-mind-map v-if="!disableItem('mind-map')" /> -->
+        <!-- <menus-toolbar-tools-mermaid v-if="!disableItem('mermaid')" /> -->
+        <!-- </div>
+          <div class="virtual-group"> -->
+        <!-- <menus-toolbar-tools-chinese-case /> -->
+        <!-- </div>
+        </template>
+        <template v-if="currentMenu === 'page'">
+          <div class="virtual-group">
+            <menus-toolbar-page-toggle-toc />
+          </div>
+          <div class="virtual-group">
+            <div class="virtual-group-row">
+              <menus-toolbar-page-margin />
+              <div>
+                <div class="virtual-group-row">
+                  <menus-toolbar-page-size />
+                </div>
+                <div class="virtual-group-row">
+                  <menus-toolbar-page-orientation />
+                </div>
+              </div>
+            </div>
+          </div> -->
+        <!-- <div class="virtual-group">
+            <menus-toolbar-page-header />
+            <menus-toolbar-page-footer />
+          </div> -->
+        <!-- <div class="virtual-group">
+            <menus-toolbar-page-break />
+            <menus-toolbar-page-break-marks />
+            <menus-toolbar-page-line-number />
+            <menus-toolbar-page-watermark />
+            <menus-toolbar-page-background />
+          </div>
+          <div class="virtual-group">
+            <menus-toolbar-page-preview />
+          </div>
+        </template>
+        <template v-if="currentMenu === 'export'">
+          <div class="virtual-group">
+            <menus-toolbar-export-image /> -->
+        <!-- <menus-toolbar-export-pdf /> -->
+        <!-- <menus-toolbar-export-html />
+            <menus-toolbar-export-text />
+          </div>
+          <div class="virtual-group">
+            <menus-toolbar-export-share v-if="!disableItem('share')" />
+            <menus-toolbar-export-embed v-if="!disableItem('embed')" />
+          </div> -->
+        <!-- </template> -->
+      </div>
+    </toolbar-scrollable>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  menus: {
+    type: Array,
+    required: true
+  },
+  currentMenu: {
+    type: String,
+    required: true
+  }
+});
+const emits = defineEmits(["menu-change"]);
+
+const disableItem = (name) => {
+  const { options } = useStore();
+  return options.value.toolbar.disableMenuItems.includes(name);
+};
+
+const scrollableRef = $ref();
+const changeMenu = async (menu) => {
+  emits("menu-change", menu);
+  await nextTick();
+  scrollableRef.update();
+};
+</script>
+
+<style lang="less" scoped>
+.ribbon-menu {
+  width: 100%;
+}
+.ribbon-tabs {
+  padding: 10px 10px 0;
+  display: flex;
+  .tabs-item {
+    font-size: var(--umo-font-size-small);
+    margin-right: 25px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    &:hover {
+      font-weight: 600;
+      &::after {
+        display: block;
+        content: "";
+        height: 3px;
+        width: 100%;
+        margin-top: 5px;
+        background-color: var(--umo-border-color);
+      }
+    }
+    &.active {
+      color: var(--umo-primary-color);
+      font-weight: 600;
+      &::after {
+        display: block;
+        content: "";
+        height: 3px;
+        width: 100%;
+        margin-top: 5px;
+        background-color: var(--umo-primary-color);
+        transition: width 0.3s;
+      }
+      &:hover::after {
+        width: 120%;
+      }
+    }
+    @media screen and (max-width: 640px) {
+      margin-right: 10px;
+    }
+  }
+}
+.scrollable-container {
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+.ribbon-container {
+  display: flex;
+  height: 56px;
+  flex-shrink: 0;
+  .virtual-group {
+    padding: 0 20px;
+    border-right: solid 1px var(--umo-border-color-light);
+    flex-shrink: 0;
+    &:empty {
+      display: none;
+    }
+    &:first-child {
+      padding-left: 0;
+    }
+    &:last-child {
+      border-right: none;
+    }
+    &-row {
+      display: flex;
+      align-items: center;
+      :deep(> *:not(:last-child)) {
+        margin-right: 5px;
+      }
+      &:not(:last-child) {
+        margin-bottom: 5px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components_umo/toolbar/scrollable.vue b/src/components_umo/toolbar/scrollable.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4919e2f5421b91a4fea501ceed667bfdc0168e41
--- /dev/null
+++ b/src/components_umo/toolbar/scrollable.vue
@@ -0,0 +1,121 @@
+<template>
+  <div ref="wraperRef" class="scrollable-container">
+    <div v-if="!hidePrev" class="scrollable-control left" @click="scrollLeft">
+      <icon name="arrow-down" />
+    </div>
+    <div ref="contentRef" class="scrollable-content">
+      <slot />
+    </div>
+    <div v-if="!hideNext" class="scrollable-control right" @click="scrollRight">
+      <icon name="arrow-down" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const wraperRef = ref(null)
+const contentRef = $ref(null)
+let hidePrev = $ref(true)
+let hideNext = $ref(true)
+
+const checkScrollPosition = () => {
+  const { scrollLeft, scrollWidth, clientWidth } = contentRef
+  hidePrev = scrollLeft === 0
+  hideNext = scrollLeft + clientWidth + 1 >= scrollWidth
+}
+
+const scrollLeft = () => (contentRef.scrollLeft -= 100)
+
+const scrollRight = () => (contentRef.scrollLeft += 100)
+
+// 监听父元素大小变化
+useResizeObserver(wraperRef, () => {
+  checkScrollPosition()
+})
+
+//
+onMounted(() => {
+  contentRef.addEventListener('scroll', checkScrollPosition)
+})
+
+// 更新
+const update = () => {
+  contentRef.scrollLeft = 0
+  hideNext = true
+  checkScrollPosition()
+}
+
+defineExpose({
+  update,
+})
+</script>
+
+<style lang="less" scoped>
+.scrollable-container {
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  .scrollable-control {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: solid 1px var(--umo-border-color);
+    border-radius: var(--umo-radius);
+    cursor: pointer;
+    color: var(--umo-text-color-light);
+    position: relative;
+    overflow: visible;
+    background-color: var(--umo-button-hover-background);
+    z-index: 10;
+    font-size: 20px;
+    &:hover {
+      border-color: var(--umo-primary-color);
+      background-color: var(--umo-primary-color);
+      color: var(--umo-color-white);
+    }
+    &.left {
+      margin-right: 5px;
+      :deep(.icon) {
+        transform: rotate(90deg);
+      }
+      &::before {
+        display: block;
+        content: '';
+        background: linear-gradient(to left, transparent, #fff);
+        position: absolute;
+        left: 22px;
+        top: 0;
+        bottom: 0;
+        width: 40px;
+        pointer-events: none;
+      }
+    }
+    &.right {
+      margin-left: 5px;
+      :deep(.icon) {
+        transform: rotate(-90deg);
+      }
+      &::before {
+        display: block;
+        content: '';
+        background: linear-gradient(to right, transparent, #fff);
+        position: absolute;
+        right: 22px;
+        top: 0;
+        bottom: 0;
+        width: 40px;
+        pointer-events: none;
+      }
+    }
+  }
+  .scrollable-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    flex: 1;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/components_umo/toolbar/source.vue b/src/components_umo/toolbar/source.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a0df9dadf0d70a0875e73ebdd4042d90c6e00618
--- /dev/null
+++ b/src/components_umo/toolbar/source.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="source-container">
+    <h3 class="title"><icon name="code" class="icon"></icon> 编辑源代码</h3>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="less" scoped>
+.source-container {
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  .title {
+    font-size: 16px;
+    font-weight: 400;
+    display: flex;
+    align-items: center;
+    .icon {
+      margin-right: 5px;
+    }
+  }
+}
+</style>
diff --git a/src/components_umo/tooltip.vue b/src/components_umo/tooltip.vue
new file mode 100644
index 0000000000000000000000000000000000000000..64b127972172f3a3d07f93f904d572076da4fe32
--- /dev/null
+++ b/src/components_umo/tooltip.vue
@@ -0,0 +1,21 @@
+<template>
+  <t-tooltip
+    :content="content"
+    theme="light"
+    placement="top"
+    :attach="container"
+    :show-arrow="false"
+    destroy-on-close
+  >
+    <slot />
+  </t-tooltip>
+</template>
+
+<script setup>
+const props = defineProps({
+  content: {},
+})
+const { container } = useStore()
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/composables/dialog.js b/src/composables/dialog.js
new file mode 100644
index 0000000000000000000000000000000000000000..903c7bc03b158f9cb3b14e0de98433082d85dfb0
--- /dev/null
+++ b/src/composables/dialog.js
@@ -0,0 +1,25 @@
+import { DialogPlugin, MessagePlugin } from 'tdesign-vue-next'
+const { container } = useStore()
+
+export const useAlert = (parmas) => {
+  return DialogPlugin.alert({
+    attach: container,
+    placement: 'center',
+    ...parmas,
+  })
+}
+export const useConfirm = (parmas) => {
+  return DialogPlugin.confirm({
+    attach: container,
+    placement: 'center',
+    preventScrollThrough: false,
+    ...parmas,
+  })
+}
+export const useMessage = (type, parmas) => {
+  const options = typeof parmas === 'string' ? { content: parmas } : parmas
+  return MessagePlugin[type]({
+    attach: container,
+    ...options,
+  })
+}
diff --git a/src/composables/hotkeys.js b/src/composables/hotkeys.js
new file mode 100644
index 0000000000000000000000000000000000000000..6029a721edced6a0158cd9ff9478c4baf81fe4b0
--- /dev/null
+++ b/src/composables/hotkeys.js
@@ -0,0 +1,10 @@
+import hotkeys from 'hotkeys-js'
+
+export const useHotkeys = (keys, callback) => {
+  hotkeys.filter = () => true
+  hotkeys(keys, (e) => {
+    e.preventDefault()
+    callback()
+    return false
+  })
+}
diff --git a/src/composables/popup.js b/src/composables/popup.js
new file mode 100644
index 0000000000000000000000000000000000000000..9483b52fe60429da4c9af3e74600c56a4f434aec
--- /dev/null
+++ b/src/composables/popup.js
@@ -0,0 +1,9 @@
+export function usePopup() {
+  const popupVisible = ref(false)
+
+  const togglePopup = (visible) => {
+    popupVisible.value = visible !== undefined ? visible : !popupVisible.value
+  }
+
+  return { popupVisible, togglePopup }
+}
diff --git a/src/composables/state.js b/src/composables/state.js
new file mode 100644
index 0000000000000000000000000000000000000000..0809e4c255b12d6fa64a7f07213f50e020a16e74
--- /dev/null
+++ b/src/composables/state.js
@@ -0,0 +1,41 @@
+export const useState = (key, editorKey) => {
+  const { options } = useStore()
+  let data = null
+  switch (key) {
+    case 'toolbar':
+      data = {
+        mode: options.value.toolbar.defaultMode,
+        show: true,
+      }
+      break
+    case 'document':
+      const { id, title, content, enableMarkdown, enableSpellcheck } =
+        options.value.document
+      data = {
+        id,
+        title,
+        content,
+        markdown: enableMarkdown,
+        spellcheck: enableSpellcheck,
+      }
+      break
+    case 'recent':
+      data = {
+        fonts: [],
+        colors: [],
+      }
+      break
+    case 'print':
+      data = {
+        singleColumn: true,
+        showPageNumber: true,
+      }
+      break
+    default:
+      console.error('[useStorage]', 'Key is not valid')
+  }
+  return useStorage(
+    `umo-editor:${editorKey || options.value.editorKey}:${key}`,
+    data,
+  )
+}
diff --git a/src/composables/store.js b/src/composables/store.js
new file mode 100644
index 0000000000000000000000000000000000000000..9a69d3325b7ed287eb74753e7b9803d66aa85992
--- /dev/null
+++ b/src/composables/store.js
@@ -0,0 +1,85 @@
+import { defaultOptions, ojbectSchema } from "@/components_umo/options";
+import generateId from "@/utils/generate-id";
+
+export const useStore = createGlobalState(() => {
+  const toolbarKey = ref(generateId());
+  const options = ref(defaultOptions);
+  const page = ref({});
+  const editor = ref(null);
+  const tableOfContents = ref([]);
+  const imagePreview = ref(false);
+  const searchReplace = ref(false);
+  const savedAt = ref(null);
+  const printing = ref(false);
+  const editorDestroyed = ref(false);
+
+  const setOptions = (value) => {
+    const opts = value?.value || value;
+
+    options.value = ojbectSchema.merge(
+      options.value,
+      Object.keys(opts).reduce((acc, key) => {
+        if (opts[key] !== undefined) acc[key] = opts[key];
+        return acc;
+      }, {})
+    );
+    return options.value;
+  };
+
+  watch(
+    () => options.value.page,
+    ({ defaultBackground, defaultMargin, defaultOrientation, watermark, showBreakMarks }) => {
+      page.value = {
+        size: options.value.dicts.pageSizes.find((item) => item.default),
+        margin: defaultMargin,
+        background: defaultBackground,
+        orientation: defaultOrientation,
+        watermark: watermark,
+        showBreakMarks: showBreakMarks,
+        showLineNumber: false,
+        showToc: false,
+        zoomLevel: 100,
+        autoWidth: false,
+        preview: {
+          enabled: false,
+          laserPointer: true
+        }
+      };
+    },
+    { immediate: true, once: true }
+  );
+
+  const setEditor = (Editor) => (editor.value = Editor);
+  const resetStore = () => {
+    editor.value = null;
+    tableOfContents.value = [];
+    searchReplace.value = false;
+    savedAt.value = null;
+    editorDestroyed.value = true;
+  };
+
+  watch(
+    () => options.value.document.readOnly,
+    async (val) => {
+      editor.value.setEditable(!val);
+      toolbarKey.value = generateId();
+    }
+  );
+
+  return {
+    toolbarKey,
+    container: `#umo-editor-${generateId(4)}`,
+    options,
+    page,
+    editor,
+    tableOfContents,
+    imagePreview,
+    searchReplace,
+    savedAt,
+    printing,
+    editorDestroyed,
+    setOptions,
+    setEditor,
+    resetStore
+  };
+});
diff --git a/src/extension/CassieKit.ts b/src/extension/CassieKit.ts
index 90d7c66a79d8d86908807f4e1548025ad878ba91..7c3614a627d537bebe02ae65742d575ff129f7b1 100644
--- a/src/extension/CassieKit.ts
+++ b/src/extension/CassieKit.ts
@@ -31,7 +31,7 @@ import { CassieTable } from "@/extension/table/Table";
 import { cursorPlugin } from "@/extension/cursor/cursor";
 import { TableOptions } from "@tiptap/extension-table";
 import { Mention, MentionOptions } from "@/extension/suggestion/mention";
-import TextAlign, { TextAlignOptions } from "@tiptap/extension-text-align";
+// import TextAlign, { TextAlignOptions } from "@tiptap/extension-text-align";
 import { PageOptions } from "@/extension/page/types";
 import { ParagraphOptions } from "@tiptap/extension-paragraph";
 import Underline from "@tiptap/extension-underline";
@@ -46,6 +46,15 @@ import CassieBlock from "@/extension/node/CassieBlock";
 import { CassieBlockExt } from "@/extension/node/CassieBlockExt";
 import { EmrOrderedList } from "@/extension/bulletlist/orderlist";
 import { CassieTableCell } from "@/extension/table/TableCell";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import FontFamily from "@tiptap/extension-font-family";
+import FontSize from "./font-size";
+import LineHeight from "./line-height";
+import TextAlign from "./text-align";
+import NodeAlign from "./node-align";
+import Selection from './selection'
+// import InvisibleNode from './invisible-node'
 export interface CassieKitOptions {
   blockquote: Partial<BlockquoteOptions> | false;
   bold: Partial<BoldOptions> | false;
@@ -72,7 +81,8 @@ export interface CassieKitOptions {
   paragraph: Partial<ParagraphOptions> | false;
   strike: Partial<StrikeOptions> | false;
   text: false;
-  textAlign: Partial<TextAlignOptions> | false;
+  lineHeight: any;
+  // textAlign: Partial<TextAlignOptions> | false;
 }
 
 export const CassieKit = Extension.create<CassieKitOptions>({
@@ -133,6 +143,7 @@ export const CassieKit = Extension.create<CassieKitOptions>({
     }
 
     if (this.options.history !== false) {
+      console.log(History, "History");
       extensions.push(History.configure(this.options?.history));
     }
 
@@ -166,9 +177,9 @@ export const CassieKit = Extension.create<CassieKitOptions>({
       extensions.push(CassieText.configure(this.options?.text));
       extensions.push(TextStyle);
     }
-    if (this.options.textAlign !== false) {
-      extensions.push(TextAlign.configure(this.options?.textAlign));
-    }
+    // if (this.options.textAlign !== false) {
+    //   extensions.push(TextAlign.configure(this.options?.textAlign));
+    // }
 
     if (this.options.table !== false) {
       extensions.push(CassieTable.configure(this.options?.table));
@@ -182,6 +193,9 @@ export const CassieKit = Extension.create<CassieKitOptions>({
     if (this.options.mention !== false) {
       extensions.push(Mention.configure(this.options?.mention));
     }
+    if (this.options.lineHeight !== false) {
+      extensions.push(LineHeight.configure(this.options?.lineHeight));
+    }
     /*自定节点*/
     extensions.push(CassieBlock);
     /*自定义扩展块*/
@@ -191,7 +205,13 @@ export const CassieKit = Extension.create<CassieKitOptions>({
     extensions.push(Insertion);
     extensions.push(Deletion);
     extensions.push(PrintExtension);
-
+    extensions.push(Subscript);
+    extensions.push(Superscript);
+    extensions.push(TextAlign);
+    extensions.push(NodeAlign);
+    extensions.push(FontFamily);
+    extensions.push(FontSize);
+    extensions.push(Selection);
     extensions.push(Image.configure({ inline: true, allowBase64: true }));
     return extensions;
   }
diff --git a/src/extension/font-size.ts b/src/extension/font-size.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b4f48551823e6763f431d0c9eb140dbff26b6686
--- /dev/null
+++ b/src/extension/font-size.ts
@@ -0,0 +1,48 @@
+import { Extension } from '@tiptap/core'
+
+export default Extension.create({
+  name: 'fontSize',
+  addOptions() {
+    return {
+      types: ['textStyle'],
+      defaultFontSize: '14px',
+    }
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontSize: {
+            default: this.options.defaultFontSize,
+            parseHTML: (element) =>
+              element.style.fontSize || this.options.defaultFontSize,
+            renderHTML: (attributes) => {
+              if (attributes.fontSize === this.options.defaultFontSize) {
+                return {}
+              }
+              return { style: `font-size: ${attributes.fontSize}` }
+            },
+          },
+        },
+      },
+    ]
+  },
+  addCommands() {
+    return {
+      setFontSize:
+        (fontSize) =>
+        ({ chain }) => {
+          return chain().setMark('textStyle', { fontSize }).run()
+        },
+      unsetFontSize:
+        () =>
+        ({ chain }) => {
+          return chain()
+            .setMark('textStyle', { fontSize: null })
+            .removeEmptyTextStyle()
+            .run()
+        },
+    }
+  },
+})
diff --git a/src/extension/invisible-node.ts b/src/extension/invisible-node.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f8ab4a7a819e59ff94e73960607a0e912fe4d13c
--- /dev/null
+++ b/src/extension/invisible-node.ts
@@ -0,0 +1,14 @@
+import { InvisibleNode } from "@tiptap-pro/extension-invisible-characters";
+
+class Invisible extends InvisibleNode {
+  constructor() {
+    super({
+      type: "paragraph",
+      predicate: (node) => {
+        return ["heading"].includes(node.type.name);
+      }
+    });
+  }
+}
+
+export default Invisible;
diff --git a/src/extension/line-height.ts b/src/extension/line-height.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8eb7762e8a5de8d2d033747bae3b388a7d0a5347
--- /dev/null
+++ b/src/extension/line-height.ts
@@ -0,0 +1,44 @@
+import { Extension } from "@tiptap/core";
+
+export default Extension.create({
+  name: "lineHeight",
+  addOptions() {
+    return {
+      types: [],
+      defaultLineHeight: 1.5
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          lineHeight: {
+            default: this.options.defaultLineHeight,
+            parseHTML: (element) => element.style.lineHeight || this.options.defaultLineHeight,
+            renderHTML: (attributes) => {
+              if (attributes.lineHeight === this.options.defaultLineHeight) {
+                return {};
+              }
+              return { style: `line-height: ${attributes.lineHeight}` };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setLineHeight:
+        (lineHeight) =>
+        ({ commands }) => {
+          return this.options.types.every((type) => commands.updateAttributes(type, { lineHeight }));
+        },
+      unsetLineHeight:
+        () =>
+        ({ commands }) => {
+          return this.options.types.every((type) => commands.resetAttributes(type, "lineHeight"));
+        }
+    };
+  }
+});
diff --git a/src/extension/node-align.ts b/src/extension/node-align.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d5d89b7c30e15bfed261d7389309212c41167bd4
--- /dev/null
+++ b/src/extension/node-align.ts
@@ -0,0 +1,50 @@
+import { Extension } from "@tiptap/core";
+
+export default Extension.create({
+  name: "nodeAlign",
+  addOptions() {
+    return {
+      defaultAlignment: "center",
+      alignments: ["flex-start", "center", "flex-end"],
+      types: ["image", "video", "audio", "iframe", "file"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          nodeAlign: {
+            default: this.options.defaultAlignment,
+            parseHTML: (element) => {
+              return element.style.justifyContent || this.options.defaultAlignment;
+            },
+            renderHTML: (attributes) => {
+              if (attributes.nodeAlign === this.options.defaultAlignment) {
+                return {};
+              }
+              return { style: `justify-content: ${attributes.nodeAlign}` };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setNodeAlign:
+        (alignment) =>
+        ({ commands }) => {
+          if (!this.options.alignments.includes(alignment)) {
+            return false;
+          }
+          return this.options.types.every((type) => commands.updateAttributes(type, { nodeAlign: alignment }));
+        },
+      unsetNodeAlign:
+        () =>
+        ({ commands }) => {
+          return this.options.types.every((type) => commands.resetAttributes(type, "nodeAlign"));
+        }
+    };
+  }
+});
diff --git a/src/extension/selection.js b/src/extension/selection.js
new file mode 100644
index 0000000000000000000000000000000000000000..6ba56f0478d13288cb5f1620cf664314763b1813
--- /dev/null
+++ b/src/extension/selection.js
@@ -0,0 +1,41 @@
+import { Extension } from "@tiptap/core";
+
+export default Extension.create({
+  name: "selection",
+  addCommands() {
+    return {
+      getSelectionText:
+        () =>
+        ({ editor }) => {
+          const { from, to, empty } = editor.state.selection;
+          if (empty) return "";
+          return editor.state.doc.textBetween(from, to, "");
+        },
+      getSelectionNode:
+        () =>
+        ({ editor }) => {
+          for (const node of Array.from(editor.vueRenderers)) {
+            if (node[1].props.selected) return node[1];
+          }
+        },
+      deleteSelectionNode:
+        () =>
+        ({ editor, chain }) => {
+          if (editor.isActive("image") || editor.isActive("video") || editor.isActive("audio") || editor.isActive("file")) {
+            const node = editor.commands.getSelectionNode();
+            if (!node) return;
+            const { options } = useStore();
+            const { id, src } = node.props.node.attrs;
+            options.value.onFileDelete(id, src);
+          }
+          return chain().deleteSelection().run();
+        }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      Backspace: () => this.editor.commands.deleteSelectionNode(),
+      Delete: () => this.editor.commands.deleteSelectionNode()
+    };
+  }
+});
diff --git a/src/extension/text-align.ts b/src/extension/text-align.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a4ad180e0e7f5b0193e77184f6526cdb8d2d4702
--- /dev/null
+++ b/src/extension/text-align.ts
@@ -0,0 +1,44 @@
+import TextAlign from "@tiptap/extension-text-align";
+
+export default TextAlign.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      types: ["heading", "paragraph"],
+      alignments: ["left", "center", "right", "justify", "distributed"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          textAlign: {
+            default: this.options.defaultAlignment,
+            parseHTML: (element) => {
+              if (element.style.textAlignLast) {
+                return "distributed";
+              }
+              return element.style.textAlign || this.options.defaultAlignment;
+            },
+            renderHTML: (attributes) => {
+              if (attributes.textAlign === this.options.defaultAlignment) {
+                return {};
+              }
+              if (attributes.textAlign === "distributed") {
+                return { style: `text-align-last: justify` };
+              }
+              return { style: `text-align: ${attributes.textAlign}` };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addKeyboardShortcuts() {
+    return {
+      ...this.parent?.(),
+      "Mod-Shift-d": () => this.editor.commands.setTextAlign("distributed")
+    };
+  }
+});
diff --git a/src/main.ts b/src/main.ts
index f70eeb7f69d4d4259b8c6356823c90e963ead179..00c9d99aa1be43f22c01bc860d3bdb2d1225b12e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,7 +3,8 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import "./index.css";
-
+// 插件本地开发
+import { useUmoEditor, UmoEditor } from "./components_umo";
 import CustomHline from "./design/components/custom-hline/index.vue";
 import CustomVline from "./design/components/custom-vline/index.vue";
 import CustomText from "./design/components/custom-text/index.vue";
@@ -31,4 +32,5 @@ app.component("v-style", {
     return h("style", {}, this.$slots.default());
   }
 });
+app.component("UmoEditor", UmoEditor);
 app.use(store).use(router).mount("#app");
diff --git a/src/router/index.ts b/src/router/index.ts
index b79eb29d82fdf68fde96f10564a9983ee069c965..6890b30521f746f8d79e8b1b9da971b1b8679ba1 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,79 +1,87 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
-import BaseEditor from "../views/BaseEditor.vue";
+// import BaseEditor from "../views/BaseEditor.vue";
 import PageEditor from "../views/PageEditor.vue";
 import PageEditorDeflate from "../views/PageEditorDeflate.vue";
-import SignEditor from "../views/SignEditor.vue";
+// import SignEditor from "../views/SignEditor.vue";
 import DocxEditor from "../views/DocxEditor.vue";
-import CommentEditor from '../views/CommentEditor.vue';
+// import CommentEditor from '../views/CommentEditor.vue';
 import ChangesetEditor from "../views/ChangesetEditor.vue";
-import CollaborativeEditor from "../views/CollaborativeEditor.vue";
+// import CollaborativeEditor from "../views/CollaborativeEditor.vue";
 import PrintEditor from "../views/PrintEditor.vue";
 import DiffEditor from "../views/DiffEditor.vue";
 import PageHeaderAndFooter from "../views/PageHeaderAndFooter.vue";
-
+import emrEditor from "../views/emrEditor/index.vue";
+import navbar from "../views/navbar.vue";
 const routes: Array<RouteRecordRaw> = [
   {
     path: "/",
-    name: "base",
-    component: BaseEditor
-  },
-  {
-    path: "/pageheaderandfooter",
-    name: "pageheaderandfooter",
-    component: PageHeaderAndFooter
-  },
-  {
-    path: "/page",
-    name: "page",
-    component: PageEditor
-  },
-  {
-    path: "/page1",
-    name: "page1",
-    component: PageEditorDeflate
-  },
-  {
-    path: "/collaborativeeditor",
-    name: "collaborativeeditor",
-    component: CollaborativeEditor
-  },
-  {
-    path: "/commenteditor",
-    name: "commenteditor",
-    component: CommentEditor
-  },
-  {
-    path: "/changeseteditor",
-    name: "changeseteditor",
-    component: ChangesetEditor
-  },
-  {
-    path: "/print",
-    name: "print",
-    component: PrintEditor
-  },
-  {
-    path: "/diff",
-    name: "diff",
-    component: DiffEditor
-  },
-  {
-    path: "/sign",
-    name: "sign",
-    component: SignEditor
-  },
-  {
-    path: "/docx",
-    name: "docx",
-    component: DocxEditor
+    name: "emrEditor",
+    component: emrEditor
   },
   {
-    path: "/about",
-    name: "about",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ "../views/AboutView.vue")
+    path: "/navbar",
+    name: "navbar",
+    component: navbar,
+    children: [
+      {
+        path: "/pageheaderandfooter",
+        name: "pageheaderandfooter",
+        component: PageHeaderAndFooter
+      },
+      {
+        path: "/page",
+        name: "page",
+        component: PageEditor
+      },
+      {
+        path: "/page1",
+        name: "page1",
+        component: PageEditorDeflate
+      },
+      // {
+      //   path: "/collaborativeeditor",
+      //   name: "collaborativeeditor",
+      //   component: CollaborativeEditor
+      // },
+      // {
+      //   path: "/commenteditor",
+      //   name: "commenteditor",
+      //   component: CommentEditor
+      // },
+      {
+        path: "/changeseteditor",
+        name: "changeseteditor",
+        component: ChangesetEditor
+      },
+      {
+        path: "/print",
+        name: "print",
+        component: PrintEditor
+      },
+      {
+        path: "/diff",
+        name: "diff",
+        component: DiffEditor
+      },
+      // {
+      //   path: "/sign",
+      //   name: "sign",
+      //   component: SignEditor
+      // },
+      {
+        path: "/docx",
+        name: "docx",
+        component: DocxEditor
+      },
+      {
+        path: "/about",
+        name: "about",
+        // route level code-splitting
+        // this generates a separate chunk (about.[hash].js) for this route
+        // which is lazy-loaded when the route is visited.
+        component: () => import(/* webpackChunkName: "about" */ "../views/AboutView.vue")
+      }
+    ]
   }
 ];
 
diff --git a/src/utils/copyright.js b/src/utils/copyright.js
new file mode 100644
index 0000000000000000000000000000000000000000..63c6fb15e90d184bb9481422d4d2a24ca49b2d75
--- /dev/null
+++ b/src/utils/copyright.js
@@ -0,0 +1,9 @@
+import pkg from '../../package.json'
+
+export default `/**
+ * ${pkg.name} ${pkg.version}
+ * @license ${pkg.license}
+ * @author ${pkg.author.name} ${pkg.author.url}
+ * @see ${pkg.homepage}
+ **/
+`
diff --git a/src/utils/diagram-editor.js b/src/utils/diagram-editor.js
new file mode 100644
index 0000000000000000000000000000000000000000..4046acbc621858291373683f2bc8ec8a60e1aa0d
--- /dev/null
+++ b/src/utils/diagram-editor.js
@@ -0,0 +1,140 @@
+// https://www.diagrams.com/doc/faq/embed-mode
+class DiagramEditor {
+  constructor({ domain, params, container }) {
+    this.domain = domain ?? this.domain
+    this.params = Object.assign(params || {}, this.params)
+    this.container = container
+    this.handleuseMessageEvent = (evt) => {
+      if (
+        this.frame !== undefined &&
+        evt.source === this.frame.contentWindow &&
+        evt.data.length > 0
+      ) {
+        try {
+          const msg = JSON.parse(evt.data)
+          if (msg) {
+            this.handleuseMessage(msg)
+          }
+        } catch (e) {
+          console.error(e)
+        }
+      }
+    }
+  }
+
+  domain = 'https://embed.diagrams.net'
+  // https://www.drawio.com/doc/faq/supported-url-parameters
+  params = {
+    ui: 'atlas',
+    proto: 'json',
+    libraries: 1,
+    configure: 1,
+    noSaveBtn: 1,
+    dark: 1,
+    lang: 'zh',
+  }
+  xml = null
+  format = 'xmlsvg'
+
+  // 编辑元素
+  edit(src) {
+    let fmt = this.format
+    if (src.substring(0, 15) === 'data:image/png;') {
+      fmt = 'xmlpng'
+    } else if (src.substring(0, 19) === 'data:image/svg+xml;') {
+      fmt = 'xmlsvg'
+    }
+    this.startEditing(src, fmt)
+    return this
+  }
+
+  // 创建 iframe
+  createFrame() {
+    const params = Object.keys(this.params)
+      .map((key) => key + '=' + this.params[key])
+      .join('&')
+    const frame = document.createElement('iframe')
+    frame.setAttribute('class', 'diagrams-iframe')
+    frame.setAttribute('src', `${this.domain}?${params}`)
+    return frame
+  }
+
+  // diagrams页面和当前页面通信
+  postMessage(msg) {
+    if (this.frame) {
+      this.frame.contentWindow.postMessage(JSON.stringify(msg), '*')
+    }
+  }
+  handleuseMessage(msg) {
+    if (msg.event === 'configure') {
+      this.configureEditor()
+    } else if (msg.event === 'init') {
+      this.initializeEditor()
+    } else if (msg.event === 'save') {
+      this.export(msg.data)
+      this.xml = msg.xml
+      if (msg.exit) {
+        msg.event = 'exit'
+      } else {
+        this.postMessage({
+          action: 'status',
+          messageKey: 'allChangesSaved',
+          modified: false,
+        })
+      }
+    }
+    if (msg.event === 'exit') {
+      if (this.format !== 'xml') {
+        if (this.xml) {
+          this.postMessage({
+            action: 'export',
+            format: this.format,
+            xml: this.xml,
+            spinKey: 'export',
+          })
+        }
+      }
+      this.stopEditing(msg)
+    }
+  }
+
+  // 开始编辑
+  startEditing(data, format) {
+    if (!this.frame) {
+      window.addEventListener('message', this.handleuseMessageEvent)
+      this.format = format ?? this.format
+      this.data = data
+      this.frame = this.createFrame()
+      const container = document.querySelector(this.container)
+      container.appendChild(this.frame)
+    }
+  }
+
+  // 停止编辑
+  stopEditing() {
+    window.removeEventListener('message', this.handleuseMessageEvent)
+    this.frame = undefined
+  }
+
+  // 安装编辑器
+  initializeEditor() {
+    this.postMessage({
+      action: 'load',
+      autosave: 0,
+      saveAndExit: '1',
+      modified: 'unsavedChanges',
+      xml: this.data,
+    })
+  }
+
+  // 设置编辑器
+  configureEditor() {
+    this.postMessage({ action: 'configure', config: this.params.configure })
+  }
+  // 导出数据
+  export(data) {
+    return data
+  }
+}
+
+export default DiagramEditor
diff --git a/src/utils/file.js b/src/utils/file.js
new file mode 100644
index 0000000000000000000000000000000000000000..5cad2cdeb03c86e920654109a46969d662da07a1
--- /dev/null
+++ b/src/utils/file.js
@@ -0,0 +1,71 @@
+const fileTypes = {
+  ai: ['ai', 'eps'],
+  app: ['app'],
+  axure: ['rp'],
+  // prettier-ignore
+  book: ['mobi', 'oeb', 'lit', 'xeb', 'ebx', 'rb', 'pdb', 'epub', 'azw3', 'hlp', 'chm', 'wdl', 'ceb', 'abm', 'pdg', 'caj'],
+  css: ['css', 'less', 'sass'],
+  dmg: ['dmg'],
+  excel: [
+    'csv',
+    'fods',
+    'ods',
+    'ots',
+    'xls',
+    'xlsm',
+    'xlsx',
+    'xlt',
+    'xltm',
+    'xltx',
+    'et',
+    'ett',
+  ],
+  exe: ['exe'],
+  html: ['htm', 'html', 'mht'],
+  // prettier-ignore
+  img: ['png', 'bmp', 'jpg', 'jpeg', 'gif', 'webp', 'tga', 'exif', 'fpx', 'svg', 'hdri', 'raw', 'ico', 'jfif', 'dib', 'pbm', 'pgm', 'ppm', 'rgb'],
+  java: ['jar', 'java'],
+  js: ['js', 'jsx', 'ts', 'tsx'],
+  json: ['json'],
+  keynote: ['key'],
+  md: ['md', 'markdown'],
+  // prettier-ignore
+  music: ['au', 'aif', 'aiff', 'aifc', 'rmi', 'mp3', 'mid', 'cda', 'wav', 'wma', 'ra', 'ram', 'snd', 'mida', 'ogg', 'ape', 'flac', 'aac'],
+  numbers: ['numbers'],
+  pages: ['pages'],
+  pdf: ['pdf'],
+  php: ['php'],
+  pkg: ['pkg'],
+  // prettier-ignore
+  ppt: ['fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx', 'dps', 'dpt', 'wpp'],
+  psd: ['psd'],
+  python: ['python'],
+  sh: ['sh'],
+  sketch: ['sketch'],
+  sql: ['sql'],
+  text: ['text', 'txt'],
+  video: ['mp4', 'avi', 'mov', 'rmvb', 'rm', 'flv', 'mpeg', 'wmv', 'mkv'],
+  vue: ['vue'],
+  // prettier-ignore
+  word: ['doc', 'docm', 'docx', 'dot', 'dotm', 'dotx', 'epub', 'fodt', 'odt', 'ott', 'rtf', 'wps', 'wpt'],
+  xmind: ['xmind'],
+  // prettier-ignore
+  zip: ['zip', 'rar', 'tar', 'gz', 'gzip', 'uue', 'bz2', 'iso', '7z', 'z', 'ace', 'lzh', 'arj', 'cab'],
+  font: ['eot', 'otf', 'fon', 'font', 'ttf', 'ttc', 'woff', 'woff2'],
+}
+
+export const getFileExtname = (filename) => {
+  const splitFileName = filename.split('.')
+  const extname = splitFileName[splitFileName.length - 1]
+  return extname
+}
+
+export const getFileIcon = (filename) => {
+  const extname = getFileExtname(filename)
+  for (const type of Object.keys(fileTypes)) {
+    if (fileTypes[type].includes(extname)) {
+      return type
+    }
+  }
+  return 'common'
+}
diff --git a/src/utils/generate-id.js b/src/utils/generate-id.js
new file mode 100644
index 0000000000000000000000000000000000000000..426f48a905f8f8a6ef1dab4ec9a3a4d139b2e3ce
--- /dev/null
+++ b/src/utils/generate-id.js
@@ -0,0 +1,4 @@
+export default (length = 8) =>
+  Math.random()
+    .toString(36)
+    .substring(2, length + 2)
diff --git a/src/utils/media-player.js b/src/utils/media-player.js
new file mode 100644
index 0000000000000000000000000000000000000000..6e4551331c8f747b01a1776a0db8d3fa95276259
--- /dev/null
+++ b/src/utils/media-player.js
@@ -0,0 +1,51 @@
+import Plyr from 'plyr'
+import 'plyr/dist/plyr.css'
+import '@/assets/styles/plyr.less'
+
+const zh_CN = {
+  restart: '重新播放',
+  rewind: '倒退 {seektime} 秒',
+  play: '播放',
+  pause: '暂停',
+  fastForward: '快进 {seektime} 秒',
+  seek: '搜索',
+  seekLabel: '{currentTime} / {duration}',
+  played: '已播放',
+  buffered: '已缓冲',
+  currentTime: '当前时间',
+  duration: '持续时间',
+  volume: '音量',
+  mute: '静音',
+  unmute: '取消静音',
+  enableCaptions: '启用字幕',
+  disableCaptions: '禁用字幕',
+  download: '下载',
+  enterFullscreen: '进入全屏',
+  exitFullscreen: '退出全屏',
+  captions: '字幕',
+  settings: '设置',
+  pip: '画中画',
+  menuBack: '返回',
+  seek: '播放位置',
+  speed: '速度',
+  normal: '正常',
+  quality: '质量',
+  loop: '循环',
+  start: '开始',
+  end: '结束',
+  all: '全部',
+  reset: '重置',
+  disabled: '已禁用',
+  enabled: '已启用',
+}
+
+export const mediaPlayer = (container) => {
+  if (!Plyr) return
+  return new Plyr(container, {
+    i18n: zh_CN,
+    settings: [],
+    tooltips: { controls: true },
+    storage: { key: 'umo-editor:player' },
+    disableContextMenu: false,
+  })
+}
diff --git a/src/utils/shortcut.js b/src/utils/shortcut.js
new file mode 100644
index 0000000000000000000000000000000000000000..82a7a298be938f1ab2ebdd8d640a7beaeb5c758a
--- /dev/null
+++ b/src/utils/shortcut.js
@@ -0,0 +1,15 @@
+export default (shortcut) => {
+  if (!shortcut) return ''
+  // 判断是 MAC OS
+  const isMacOS = /macintosh|mac os x/gi.test(navigator.userAgent)
+  let keys = shortcut
+  if (isMacOS) {
+    keys = keys
+      .replace(/ctrl/gi, '⌘')
+      .replace(/shift/gi, '⇧')
+      .replace(/alt/gi, '⌥')
+      .replace(/Enter/gi, 'Return')
+      .replace(/Backspace/gi, 'Delete')
+  }
+  return keys
+}
diff --git a/src/utils/time-ago.js b/src/utils/time-ago.js
new file mode 100644
index 0000000000000000000000000000000000000000..ace11eeb774a480ce606285b5496780f99130696
--- /dev/null
+++ b/src/utils/time-ago.js
@@ -0,0 +1,20 @@
+export default (timestamp) => {
+  const messages = {
+    justNow: '刚刚',
+    past: (n) => (n.match(/\d/) ? `${n}前` : n),
+    future: (n) => (n.match(/\d/) ? `未来 ${n}` : n),
+    month: (n, past) =>
+      n === 1 ? (past ? '上个月' : '下个月') : `${n}个月${n > 1 ? '' : ''}`,
+    year: (n, past) =>
+      n === 1 ? (past ? '去年' : '明年') : `${n}年${n > 1 ? '' : ''}`,
+    day: (n, past) =>
+      n === 1 ? (past ? '昨天' : '明天') : `${n}天${n > 1 ? '' : ''}`,
+    week: (n, past) =>
+      n === 1 ? (past ? '上一周' : '下一周') : `${n}周${n > 1 ? '' : ''}`,
+    hour: (n) => `${n}小时${n > 1 ? '' : ''}`,
+    minute: (n) => `${n}分钟${n > 1 ? '' : ''}`,
+    second: (n) => `${n}秒${n > 1 ? '' : ''}`,
+  }
+  const time = useTimeAgo(new Date(timestamp), { messages })
+  return time.value.replace(/"/gi, '')
+}
diff --git a/src/views/PageEditorDeflate.vue b/src/views/PageEditorDeflate.vue
index 52638ea9021eb5bb384639d78be2d2f08d33203b..13bc8e7be0afd5ec9302688897098313aba80a86 100644
--- a/src/views/PageEditorDeflate.vue
+++ b/src/views/PageEditorDeflate.vue
@@ -1,112 +1,176 @@
 <template>
   <div class="grid flex-grow card bg-base-300 rounded-box place-items-center">
-    <div>
+    <!-- <div>
       <FileTools :editor="editor" v-if="editor"></FileTools>
-    </div>
+    </div> -->
     <editor-content class="my-2" :editor="editor" />
+    <template v-if="options.document.enableBubbleMenu && editor && !editorDestroyed">
+      <bubble-menu
+        class="umo-editor-bubble-menu"
+        :editor="editor"
+        :tippy-options="{
+          appendTo: 'parent',
+          maxWidth: 480,
+          zIndex: 99
+        }"
+      >
+        <menus-bubble />
+      </bubble-menu>
+    </template>
+    <!-- <template v-if="options.document.enableBlockMenu && editor && !editorDestroyed">
+      <menus-block />
+    </template> -->
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import applyDevTools from "prosemirror-dev-tools";
 import { pageContent, headerlist, footerlist, pageContentHtml } from "./content";
 import { UnitConversion } from "@/extension/page/core";
-import { EditorContent, Editor } from "@tiptap/vue-3";
+import { EditorContent, Editor, BubbleMenu } from "@tiptap/vue-3";
 import { onBeforeUnmount, onMounted, PropType, reactive, ref, shallowRef, unref, watchEffect } from "vue";
 import { BuildRender, ContextMenuOptions } from "@/default";
 import { CassieKit } from "@/extension";
 import FileTools from "./filetools/FileTools.vue";
 const unitConversion = new UnitConversion();
-export default {
-  components: {
-    EditorContent,
-    FileTools
-  },
-  setup() {
-    let bodyWidth = unitConversion.mmConversionPx(180);
-    let h = unitConversion.mmConversionPx(180);
-    const menulist = [
-      { classify: "radio", label: "单选", value: "radio" },
-      {
-        classify: "checkbox",
-        label: "多选",
-        value: "checkbox"
-      },
-      {
-        classify: "date",
-        label: "日期",
-        value: "date"
-      }
-    ];
-    const onUpdate = (output: any, editor: any) => {};
-    const onCreate = (option: any) => {
-      console.log(option);
-    };
-    const editor = shallowRef<Editor>();
-    onMounted(() => {
-      //如果是协作模式 设置 content需要滞后 否则会重复添加
-      editor.value = new Editor({
-        onUpdate({ editor }) {
-          //console.log(editor.getHTML());
-        },
-        editable: true,
-        content: pageContentHtml,
-        editorProps: {
-          attributes: {
-            class: ""
-          }
-        },
-        injectCSS: false,
-        extensions: [
-          CassieKit.configure({
-            textAlign: { types: ["heading", "paragraph"] },
-            mention: {
-              clickSuggestion: BuildRender(menulist) //编辑器右键菜单
-            },
-            highlight: {
-              multicolor: true
-            },
-            table: {
-              HTMLAttributes: {
-                class: "border-collapse border border-slate-400"
-              }
-            },
-            tableCell: {
-              HTMLAttributes: {
-                class: "border border-slate-300"
-              }
-            },
-            tableHeader: {
-              HTMLAttributes: {
-                class: "border border-slate-300"
-              }
-            },
-            page: {
-              bodyPadding: 10,
-              bodyWidth: bodyWidth,
-              headerHeight: 100,
-              footerHeight: 60,
-              bodyHeight: h - 100,
-              headerData: headerlist,
-              footerData: footerlist,
-              isPaging: true
-            },
-            focus: false, //选中样式
-            history: false //历史记录回退 协作模式禁止开启
-          })
-        ]
-      });
-      setTimeout(() => {
-        editor.value?.view.dispatch(editor.value?.state.tr.setMeta("splitPage", true));
-      }, 1000);
-      //applyDevTools(editor.value.view);
-    });
+const { container, options, page, tableOfContents, editor, setEditor, editorDestroyed } = useStore();
+const $document = useState("document");
 
-    onBeforeUnmount(() => {
-      editor.value?.destroy();
-    });
-    return { pageContent, menulist, headerlist, footerlist, onUpdate, onCreate, editor, bodyWidth };
+// export default {
+//   components: {
+//     EditorContent
+//     // FileTools
+//   },
+//   setup() {
+let bodyWidth = unitConversion.mmConversionPx(180);
+let h = unitConversion.mmConversionPx(180);
+const menulist = [
+  { classify: "radio", label: "单选", value: "radio" },
+  {
+    classify: "checkbox",
+    label: "多选",
+    value: "checkbox"
+  },
+  {
+    classify: "date",
+    label: "日期",
+    value: "date"
   }
+];
+const onUpdate = (output: any, editor: any) => {};
+const onCreate = (option: any) => {
+  console.log(option);
 };
+// const editor = shallowRef<Editor>();
+// onMounted(() => {
+//如果是协作模式 设置 content需要滞后 否则会重复添加
+const editorInstance = new Editor({
+  onUpdate({ editor }) {
+    //console.log(editor.getHTML());
+    $document.value.content = editor.getHTML();
+  },
+  editable: !options.value.document.readOnly,
+  autofocus: options.value.document.autofocus,
+  content: options.value.document.content,
+  editorProps: {
+    attributes: {
+      class: ""
+    }
+  },
+  injectCSS: false,
+  extensions: [
+    CassieKit.configure({
+      // textAlign: { types: ["heading", "paragraph"] },
+      mention: {
+        clickSuggestion: BuildRender(menulist) //编辑器右键菜单
+      },
+      highlight: {
+        multicolor: true
+      },
+      table: {
+        HTMLAttributes: {
+          class: "border-collapse border border-slate-400"
+        }
+      },
+      tableCell: {
+        HTMLAttributes: {
+          class: "border border-slate-300"
+        }
+      },
+      tableHeader: {
+        HTMLAttributes: {
+          class: "border border-slate-300"
+        }
+      },
+      lineHeight: {
+        types: ["heading", "paragraph"],
+        defaultLineHeight: options.value.dicts.lineHeights.find((item) => item.default).value
+      },
+      page: {
+        bodyPadding: 10,
+        bodyWidth: bodyWidth,
+        headerHeight: 100,
+        footerHeight: 60,
+        bodyHeight: h - 100,
+        headerData: headerlist,
+        footerData: footerlist,
+        isPaging: true
+      },
+      focus: false //选中样式
+    })
+  ]
+});
+setTimeout(() => {
+  editorInstance?.view.dispatch(editorInstance?.state.tr.setMeta("splitPage", true));
+}, 1000);
+console.log(options.document, editor, !editorDestroyed, "231212121");
+setEditor(editorInstance);
+
+//applyDevTools(editor.value.view);
+// });
+
+onBeforeUnmount(() => {
+  editorInstance.destroy();
+});
+
+// return { pageContent, menulist, headerlist, footerlist, onUpdate, onCreate, editor, bodyWidth };
+// }
+// };
 </script>
-<style scoped></style>
+<style lang="less">
+@import "@/assets/styles/editor.less";
+@import "@/assets/styles/drager.less";
+.umo-editor-bubble-menu {
+  padding: 8px 10px;
+  box-shadow: var(--umo-shadow);
+  border: 0.5px solid var(--umo-border-color-dark);
+  border-radius: var(--umo-radius);
+  display: flex;
+  align-items: center;
+  background-color: var(--umo-color-white);
+  flex-wrap: wrap;
+  &:empty {
+    display: none;
+  }
+
+  .menu-button.show-text .button-content .text {
+    display: none !important;
+  }
+  .menu-button.huge {
+    height: var(--td-comp-size-xs);
+    min-width: unset;
+    .button-content {
+      min-width: unset !important;
+      .icon {
+        font-size: 16px;
+        margin-top: 0;
+      }
+    }
+  }
+}
+.umo-editor-block-menu {
+  .menu-button {
+    color: var(--umo-text-color-light) !important;
+  }
+}
+</style>
diff --git a/src/views/emrEditor/index.vue b/src/views/emrEditor/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e8bfe436ccb7363642d7b32da10dea4dcf7880ff
--- /dev/null
+++ b/src/views/emrEditor/index.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="box">
+    <umo-editor ref="editorRef" v-bind="options" @save="onSave" />
+  </div>
+</template>
+
+<script setup>
+import generateId from "@/utils/generate-id";
+const editorRef = $ref(null);
+console.log(editorRef, "editorRef");
+const templates = [
+  {
+    title: "工作任务",
+    description: "工作任务模板",
+    content: `<h1>工作任务</h1><h3>任务名称：</h3><p>[任务的简短描述]</p><h3>负责人：</h3><p>[执行任务的个人姓名]</p><h3>截止日期：</h3><p>[任务需要完成的日期]</p><h3>任务详情：</h3><ol><li>[任务步骤1]</li><li>[任务步骤2]</li><li>[任务步骤3]...</li></ol><h3>目标：</h3><p>[任务需要达成的具体目标或结果]</p><h3>备注：</h3><p>[任何额外信息或注意事项]</p>`
+  },
+  {
+    title: "工作周报",
+    description: "工作周报模板",
+    content: `<h1>工作周报</h1><h2>本周工作总结</h2><hr /><h3>已完成工作：</h3><ul><li>[任务1名称]：[简要描述任务内容及完成情况]</li><li>[任务2名称]：[简要描述任务内容及完成情况]</li><li>...</li></ul><h3>进行中工作：</h3><ul><li>[任务1名称]：[简要描述任务当前进度和下一步计划]</li><li>[任务2名称]：[简要描述任务当前进度和下一步计划]</li><li>...</li></ul><h3>问题与挑战：</h3><ul><li>[问题1]：[描述遇到的问题及当前解决方案或需要的支持]</li><li>[问题2]：[描述遇到的问题及当前解决方案或需要的支持]</li><li>...</li></ul><hr /><h2>下周工作计划</h2><h3>计划开展工作：</h3><ul><li>[任务1名称]：[简要描述下周计划开始的任务内容]</li><li>[任务2名称]：[简要描述下周计划开始的任务内容]</li><li>...</li></ul><h3>需要支持与资源：</h3><ul><li>[资源1]：[描述需要的资源或支持]</li><li>[资源2]：[描述需要的资源或支持]</li><li>...</li></ul>`
+  }
+];
+const onSave = async (content, page, document) => {
+  localStorage.setItem("document.content", document.content);
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      const success = true;
+      if (success) {
+        console.log("onSave", { content, page, document });
+        resolve("操作成功");
+      } else {
+        reject("操作失败");
+      }
+    }, 2000);
+  });
+};
+const options = $ref({
+  toolbar: {
+    // defaultMode: 'classic',
+    // menus: ['base'],
+    enableSourceEditor: true
+  },
+  document: {
+    // title: '测试文档',
+    content: localStorage.getItem("document.content") || "<p>测试文档</p>"
+  },
+  templates,
+  shareUrl: "https://umodoc.com",
+  file: {
+    // allowedMimeTypes: [
+    //   'application/pdf',
+    //   'image/svg+xml',
+    //   'video/mp4',
+    //   'audio/*',
+    // ],
+  },
+  async onFileUpload(file) {
+    if (!file) throw new Error("没有找到要上传的文件");
+    console.log("onUpload", file);
+    await new Promise((resolve) => setTimeout(resolve, 3000));
+    return {
+      id: generateId(),
+      url: file.url || URL.createObjectURL(file),
+      name: file.name,
+      type: file.type,
+      size: file.size
+    };
+  }
+});
+</script>
+
+<style>
+.box {
+  margin: 20px;
+  height: calc(100vh - 40px);
+  border: solid 1px #ddd;
+  box-sizing: border-box;
+  position: relative;
+}
+</style>
diff --git a/src/views/navbar.vue b/src/views/navbar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cc4979d58d56542269b485d6f2c0d0b331267689
--- /dev/null
+++ b/src/views/navbar.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="navbar">
+    <div class="navbar-start">
+      <div class="avatar">
+        <div class="w-10 rounded-full">
+          <img src="../avatar.png" />
+        </div>
+      </div>
+      <a class="btn btn-ghost normal-case text-xl">CoolEditor</a>
+    </div>
+    <div class="navbar-center">
+      <ul class="menu menu-horizontal px-1">
+        <!-- <li>
+          <router-link to="/">基础编辑器</router-link>
+        </li> -->
+        <li>
+          <router-link to="/page">设计模式</router-link>
+        </li>
+        <li>
+          <router-link to="/pageheaderandfooter">页眉页脚</router-link>
+        </li>
+
+        <li>
+          <router-link to="/page1">分页演示</router-link>
+        </li>
+        <!-- <li>
+          <router-link to="/collaborativeeditor">协作演示</router-link>
+        </li> -->
+        <li>
+          <router-link to="/commenteditor">评论/批注</router-link>
+        </li>
+        <li>
+          <!-- <router-link to="/changeseteditor">操作记录</router-link> -->
+        </li>
+        <li>
+          <router-link to="/diff">版本比较</router-link>
+        </li>
+        <li>
+          <router-link to="/sign">初始化分页</router-link>
+        </li>
+        <li>
+          <router-link to="/about">关于编辑器</router-link>
+        </li>
+      </ul>
+    </div>
+    <div class="navbar-end">
+      <ul class="menu menu-horizontal px-1">
+        <li>
+          <a href="https://github.com/Cassielxd/CassieEditor">github</a>
+        </li>
+        <li>
+          <a href="https://gitee.com/stringlxd/cool_emr">gitee</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <router-view />
+  <footer class="footer p-10 bg-neutral text-neutral-content">
+    <div>
+      <svg width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" class="fill-current">
+        <path
+          d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"
+        ></path>
+      </svg>
+      <p>编辑器 348040933@qq.com</p>
+    </div>
+  </footer>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+@Options({
+  data() {
+    return {
+      activeIndex: "1"
+    };
+  },
+  methods: {
+    handleSelect: (key: string) => {
+      console.log(key);
+    }
+  }
+})
+export default class App extends Vue {}
+</script>
+<style>
+.ProseMirror-focused {
+  outline: none;
+}
+
+.collaboration-cursor__caret {
+  position: relative;
+  margin-left: -1px;
+  margin-right: -1px;
+  border-left: 1px solid #0d0d0d;
+  border-right: 1px solid #0d0d0d;
+  word-break: normal;
+  pointer-events: none;
+}
+
+/* Render the username above the caret */
+.collaboration-cursor__label {
+  position: absolute;
+  top: -1.4em;
+  left: -1px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  user-select: none;
+  color: #0d0d0d;
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px 3px 3px 0;
+  white-space: nowrap;
+}
+</style>
diff --git a/vite.config.js b/vite.config.js
index 626133dfce9d61dc41ae3ff390f123596b4cd837..5bef34005b4cd9a0b90d4091d5200063c4cc78d4 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,6 +3,11 @@ import vue from "@vitejs/plugin-vue";
 const path = require("path");
 import wasm from "vite-plugin-wasm";
 import topLevelAwait from "vite-plugin-top-level-await";
+import VueMacros from "unplugin-vue-macros/vite";
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import { TDesignResolver } from "unplugin-vue-components/resolvers";
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 // https://vitejs.dev/config/
 export default defineConfig({
   resolve: {
@@ -13,7 +18,53 @@ export default defineConfig({
       }
     ]
   },
-  plugins: [vue(), wasm(), topLevelAwait()],
+  plugins: [
+    VueMacros({
+      plugins: {
+        vue: vue()
+      }
+    }),
+    wasm(),
+    topLevelAwait(),
+    AutoImport({
+      dirs: ["./src/composables"],
+      imports: ["vue", "@vueuse/core"],
+      resolvers: [
+        TDesignResolver({
+          library: "vue-next",
+          esm: true
+        })
+      ],
+      dts: "./imports.d.ts"
+    }),
+    Components({
+      directoryAsNamespace: true,
+      dirs: ["./src/components_umo"],
+      resolvers: [
+        TDesignResolver({
+          library: "vue-next",
+          esm: true
+        })
+      ]
+    }),
+    createSvgIconsPlugin({
+      iconDirs: [process.cwd() + "/src/assets/icons"]
+    })
+  ],
+  css: {
+    preprocessorOptions: {
+      less: {
+        modifyVars: {
+          "@prefix": "umo"
+        },
+        javascriptEnabled: true
+      }
+    }
+  },
+  define: {
+    // enable hydration mismatch details in production build
+    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "true"
+  },
   build: {
     minify: "terser",
     brotliSize: false,