feat: 🎸 SelectionDecoration

Author: pileax

.vitepress/config/theme/sidebar.ts

@@ -91,6 +91,7 @@ export function sidebarApi(locale :string) {
         { text: 'Color Highlighter', link: extension('color-highlighter') },
         { text: 'Image', link: extension('image') },
         { text: 'Placeholder', link: extension('placeholder') },
+        { text: 'Selection Decoration', link: extension('selection-decoration') },
         { text: 'Table', link: extension('table') },
         { text: 'Trailing Node', link: extension('trailing-node') },
         { text: 'Unique ID', link: extension('unique-id') },

.vitepress/data/demo/article.ts

@@ -5,7 +5,54 @@
           :editor="yiiEditor?.editor"
           :menu="options.mainMenu"
           :data-theme="isDark ? 'dark' : ''"
-      />
+      >
+        <template #left>
+          <o-divider vertical />
+          <o-popover
+              ref="popover"
+              tippy-class="o-ai-settings-popover"
+              class="o-simple-command-btn"
+              placement="bottom"
+              trigger="click"
+              arrow
+          >
+            <template #trigger>
+              <o-command-btn
+                  icon="settings"
+                  tooltip="Settings"
+              >
+              </o-command-btn>
+            </template>
+
+            <div>
+              <o-btn-group>
+                <div data-tippy-role="tooltip">
+                  <o-btn label="OpenAI"
+                         :class="{ 'active': aiOption.provider === 'openai' }"
+                         @click="aiOption.provider = 'openai'" />
+                </div>
+                <div data-tippy-role="tooltip">
+                  <o-btn label="DeepSeek"
+                         :class="{ 'active': aiOption.provider === 'deepseek' }"
+                         @click="aiOption.provider = 'deepseek'" />
+                </div>
+              </o-btn-group>
+            </div>
+
+            <div>
+              <o-input ref="input"
+                       v-model="aiOption.apiKey"
+                       type="text"
+                       placeholder="API Key"
+                       autofocus clearable>
+                <template #prefix>
+                  <o-icon name="search" class="o-tips" />
+                </template>
+              </o-input>
+            </div>
+          </o-popover>
+        </template>
+      </o-main-menu>
     </header>
 
     <section class="layout-content">
@@ -23,9 +70,20 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, provide, onMounted, onUnmounted } from 'vue';
+import { computed, ref, provide, watch, onMounted, onUnmounted } from 'vue';
 import { useData } from 'vitepress';
-import { YiiEditor, ODocToc, OMainMenu } from '@yiitap/vue';
+import {
+  YiiEditor,
+  ODocToc,
+  OMainMenu,
+  OCommandBtn,
+  ODivider,
+  OIcon,
+  OInput,
+  OBtn,
+  OBtnGroup,
+  OPopover
+} from '@yiitap/vue';
 import '@yiitap/vue/dist/vue.css';
 import { BasicFeaturesArticle, BasicFeaturesArticleZh } from '../../data/demo/article';
 
@@ -41,10 +99,14 @@ const { isDark } = useData();
 const localeAlt = ref('en')
 const yiiEditor = ref<InstanceType<typeof YiiEditor>>()
 const tocRef = ref<InstanceType<typeof ODocToc>>()
+const aiOption = ref<AiOption>({
+  provider: 'deepseek',
+})
 provide('locale', localeAlt)
 
 const options = computed(() => {
   return {
+    aiOption: aiOption.value,
     // locale: locale.value,
     darkMode: isDark.value,
     // editable: editable.value,
@@ -79,8 +141,10 @@ const options = computed(() => {
       'table',
       'callout',
       'emoji',
+      'aiBlock',
     ],
     extensions: [
+      'OAiBlock',
       'OBlockquote',
       'OCallout',
       'OCodeBlock',
@@ -98,12 +162,39 @@ const options = computed(() => {
   }
 })
 
+const aiOptions = computed(() => {
+  return [
+    { label: 'OpenAI', value: 'openai' },
+    { label: 'DeepSeek', value: 'deepseek' },
+  ]
+})
+
+function init() {
+  localeAlt.value = props.locale
+  try {
+    const aiOptionString = localStorage.getItem('yiitap.ai.option')
+    if (aiOptionString) {
+      aiOption.value = JSON.parse(aiOptionString)
+    }
+  } catch (e) {
+    // ignore
+  }
+}
+
 const onScroll = (event: Event) => {
   tocRef.value?.onScroll(event);
-};
+}
+
+watch(
+    aiOption,
+    (newValue) => {
+      localStorage.setItem('yiitap.ai.option', JSON.stringify(aiOption.value))
+    },
+    { deep: true }
+)
 
 onMounted(() => {
-  localeAlt.value = props.locale
+  init()
   window.addEventListener("scroll", onScroll);
 });
 
@@ -132,8 +223,25 @@ onUnmounted(() => {
 
 .layout-toc {
   position: fixed;
-  top: 64px ;
+  top: 120px ;
   right: 10px;
   z-index: 101;
 }
+
+.o-input {
+  width: 400px;
+}
+
+.o-btn-group {
+  margin-bottom: 10px;
+
+  .o-btn.active {
+    color: white;
+    background: var(--vp-button-brand-bg);
+
+    &:hover {
+      background: var(--vp-button-brand-hover-bg)!important;
+    }
+  }
+}
 </style>

.vitepress/theme/components/YiitapDemo.vue

@@ -10,4 +10,17 @@
         display: unset;
         width: 100%;
     }
+}
+
+.global-toast-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.o-ai-settings-popover {
+    .popover-content {
+        min-width: 480px;
+    }
 }

.vitepress/theme/style/main.css

@@ -1,6 +1,6 @@
 {
   "name": "yiitap-docs",
-  "version": "1.0.0",
+  "version": "1.3.1",
   "description": "Documentation for Yiitap",
   "keywords": [
     "vitepress",
@@ -18,7 +18,10 @@
     "url": "https://github.com/yiitap/docs/issues"
   },
   "dependencies": {
-    "@yiitap/vue": "^1.2.4",
+    "@yiitap/vue": "^1.3.1",
+    "@yiitap/util-emoji": "^1.3.1",
+    "markdown-it": "^14.1.0",
+    "openai": "^4.88.0",
     "vue": "^3.5.13"
   },
   "devDependencies": {