feat: add an extension to switch link in the editor

ui/package.json

@@ -11,6 +11,7 @@
     "@halo-dev/console-shared": "^2.16.0",
     "@halo-dev/hyperlink-card": "workspace:*",
     "@halo-dev/richtext-editor": "^2.16.0",
+    "floating-vue": "^5.2.2",
     "vue": "^3.4.27"
   },
   "devDependencies": {
@@ -24,11 +25,14 @@
     "@vue/eslint-config-typescript": "^11.0.3",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.1.3",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.26.0",
     "jsdom": "^19.0.0",
+    "postcss": "^8.4.38",
     "prettier": "^2.8.8",
     "sass": "^1.77.4",
+    "tailwindcss": "^3.4.3",
     "typescript": "~4.7.4",
     "unplugin-icons": "^0.15.3",
     "vite": "^5.2.12",

ui/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

ui/src/components/LinkViewBubbleMenuItem.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import type { LinkViewType } from "@/editor";
+import type { Editor } from "@halo-dev/richtext-editor";
+import { Dropdown as VDropdown } from "floating-vue";
+import type { Component } from "vue";
+import LinkViewMenu from "@/components/LinkViewMenu.vue";
+import MdiMenuDown from "~icons/mdi/menu-down";
+
+const props = withDefaults(
+  defineProps<{
+    editor: Editor;
+    isActive?: ({ editor }: { editor: Editor }) => boolean;
+    visible?: ({ editor }: { editor: Editor }) => boolean;
+    action?: ({ editor }: { editor: Editor }) => Component | void;
+    type: ({ editor }: { editor: Editor }) => LinkViewType;
+  }>(),
+  {
+    isActive: () => false,
+    visible: () => true,
+    action: undefined,
+    type: undefined,
+  }
+);
+</script>
+
+<template>
+  <template v-if="visible({ editor })">
+    <VDropdown
+      class="inline-flex"
+      :triggers="['click']"
+      :popper-triggers="['click']"
+    >
+      <button
+        :class="{ 'bg-gray-200 !text-black': isActive({ editor }) }"
+        class="inline-flex w-30 items-center gap-x-1 rounded-md p-1 text-base text-gray-600 hover:bg-gray-100"
+      >
+        <component :is="type?.({ editor }).icon" class="h-5 w-5" />
+        <span>{{ type?.({ editor }).title }}</span>
+        <MdiMenuDown />
+      </button>
+      <template #popper>
+        <div
+          class="relative max-h-72 w-48 overflow-hidden overflow-y-auto rounded-md bg-white p-1 drop-shadow"
+        >
+          <KeepAlive>
+            <LinkViewMenu v-bind="props"></LinkViewMenu>
+          </KeepAlive>
+        </div>
+      </template>
+    </VDropdown>
+  </template>
+</template>
+<style>
+.v-popper__popper.v-popper__popper--show-from .v-popper__wrapper {
+  transform: scale(0.9);
+}
+
+.v-popper__popper.v-popper__popper--show-to .v-popper__wrapper {
+  transform: none;
+  transition: transform 0.1s;
+}
+</style>

ui/src/components/LinkViewMenu.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { Editor } from "@halo-dev/richtext-editor";
+import type { Component } from "vue";
+import { linkViewTypes } from "@/editor/index";
+import type { LinkViewType } from "@/editor/index";
+
+const props = defineProps<{
+  editor: Editor;
+  isActive?: ({ editor }: { editor: Editor }) => boolean;
+  visible?: ({ editor }: { editor: Editor }) => boolean;
+  action?: ({ editor }: { editor: Editor }) => Component | void;
+  type: ({ editor }: { editor: Editor }) => LinkViewType;
+}>();
+
+const handleSwitchLinkViewType = (item: LinkViewType) => {
+  if (isActiveType(item)) {
+    return;
+  }
+  item.action({ editor: props.editor });
+};
+
+const isActiveType = (item: LinkViewType) => {
+  return props.type?.({ editor: props.editor }).key === item.key || false;
+};
+</script>
+<template>
+  <ul class="flex flex-col">
+    <li
+      v-for="item in linkViewTypes"
+      :key="item.key"
+      class="inline-flex cursor-pointer select-none items-center rounded-md p-1 m-0.5 gap-x-1 text-base hover:bg-gray-100"
+      :class="{ '!bg-gray-200 !text-black': isActiveType(item) }"
+      @click="handleSwitchLinkViewType(item)"
+    >
+      <component :is="item.icon" class="h-5 w-5" />
+      <span>{{ item.title }}</span>
+    </li>
+  </ul>
+</template>

ui/src/components/TextExtensionMenuItem.vue

@@ -0,0 +1,30 @@
+
+<script lang="ts" setup>
+import type { LinkViewType } from "@/editor";
+import { BlockActionSeparator, type Editor } from "@halo-dev/richtext-editor";
+import type { Component } from "vue";
+import LinkViewBubbleMenuItem from "./LinkViewBubbleMenuItem.vue";
+
+const props = withDefaults(
+  defineProps<{
+    editor: Editor;
+    isActive?: ({ editor }: { editor: Editor }) => boolean;
+    visible?: ({ editor }: { editor: Editor }) => boolean;
+    action?: ({ editor }: { editor: Editor }) => Component | void;
+    type: ({ editor }: { editor: Editor }) => LinkViewType;
+  }>(),
+  {
+    isActive: () => false,
+    visible: () => true,
+    action: undefined,
+    type: undefined,
+  },
+);
+</script>
+<template>
+  <template v-if="visible({ editor })">
+    <BlockActionSeparator />
+    <LinkViewBubbleMenuItem v-bind="props" />
+    <BlockActionSeparator />
+  </template>
+</template>