docs: add formula demo (#37)

packages/docs/fluent-editor/.vitepress/sidebar.ts

@@ -13,6 +13,7 @@ export function sidebar() {
         { text: '@提醒', link: '/docs/mention' },
         { text: '插入表情', link: '/docs/emoji' },
         { text: '格式刷', link: '/docs/format-painter' },
+        { text: '公式', link: '/docs/formula' },
       ]
     }
   ]

packages/docs/fluent-editor/demos/formula.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import FluentEditor from '@opentiny/fluent-editor'
+import katex from 'katex'
+import 'katex/dist/katex.min.css'
+window.katex = katex
+
+let editor
+
+const TOOLBAR_CONFIG = [
+  [{ header: [] }],
+  ['bold', 'italic', 'underline', 'link'],
+  [{ list: 'ordered' }, { list: 'bullet' }],
+  ['clean'],
+  ['formula'],
+]
+
+onMounted(() => {
+  // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
+  import('@opentiny/fluent-editor').then((module) => {
+    const FluentEditor = module.default
+
+    editor = new FluentEditor('#editor', {
+      theme: 'snow',
+      modules: {
+        toolbar: TOOLBAR_CONFIG,
+        formula: true,
+      },
+    })
+  })
+})
+</script>
+
+<template>
+  <div id="editor" />
+</template>

packages/docs/fluent-editor/docs/formula.md

@@ -0,0 +1,8 @@
+# 公式
+
+通过配置 `formula` 为 true，并配置工具栏按钮 `formula`，可以开启插入公式功能。
+
+由于插入公式依赖 `KaTeX`，需要安装 `katex` 依赖包，并引入对应的样式。
+
+:::demo src=demos/formula.vue
+:::

packages/docs/package.json

@@ -21,6 +21,7 @@
     "vitepress": "^1.3.2"
   },
   "dependencies": {
-    "@opentiny/fluent-editor": "workspace:^"
+    "@opentiny/fluent-editor": "workspace:^",
+    "katex": "^0.16.11"
   }
 }