WIP: impl TextSelectionmenu by floating-ui

src/components/Floating.vue

@@ -41,18 +41,21 @@
 // .floating-content[data-theme~="warning"] { ... }
 
 import { ref, watch, computed, toRefs } from "vue";
+import type { Ref } from "vue";
 import { useElementHover } from "@vueuse/core";
 import * as floating from "@floating-ui/vue";
-import type { Placement } from "@floating-ui/vue";
+import type { Placement, VirtualElement } from "@floating-ui/vue";
 
 // interface ----
 
 type OnShowFn = () => void;
 type OnHideFn = () => void;
 
 type Props = {
+  target?: HTMLElement | VirtualElement;
   placement?: Placement;
   interactive?: boolean;
+  inline?: boolean;
   delay?: number | [number, number];
   arrow?: boolean;
   theme?: string;
@@ -61,8 +64,10 @@ type Props = {
   onHide?: OnHideFn;
 };
 const props = withDefaults(defineProps<Props>(), {
+  target: undefined,
   placement: "top",
   interactive: false,
+  inline: false,
   delay: 0,
   arrow: true,
   theme: "light",
@@ -73,15 +78,20 @@ const slots = defineSlots();
 // define varibales ----
 
 const {
+  target: targetProp,
   placement: placementProp,
   interactive,
+  inline,
   delay,
   arrow: arrowProp,
   theme: themeProp,
-  trigger: triggerRef,
+  trigger: triggerProp,
 } = toRefs(props);
 
-const targetRef = ref();
+const defaultSlotRef = ref();
+const targetRef = computed((): HTMLElement | VirtualElement =>
+  targetProp.value ?? defaultSlotRef.value
+); // targetRef変数を消せるかも？HMRで動作する？
 const floatingRef = ref();
 const arrowRef = ref();
 
@@ -96,6 +106,7 @@ const {
   whileElementsMounted: floating.autoUpdate,
   placement: placementProp,
   middleware: [
+    ...(inline.value ? [floating.inline()] : []),
     floating.offset(6),
     floating.flip({ fallbackAxisSideDirection: "end", crossAxis: false }),
     floating.shift({ padding: 5 }),
@@ -110,19 +121,24 @@ const delayOptions = computed(() => {
   return { delayEnter, delayLeave };
 });
 
-// define hover states ----
-
-const isTargetHovered = useElementHover(targetRef, {
-  delayEnter: delayOptions.value.delayEnter,
-  delayLeave: delayOptions.value.delayLeave + (interactive.value ? 100 : 0),
+const isUsingDefaultSlot = computed((): boolean => {
+  return !targetProp.value;
 });
+
+// define trigger states ----
+
+const triggerRef = triggerProp.value !== undefined ?
+  triggerProp as Ref<boolean> :
+  useElementHover(defaultSlotRef, {
+    delayEnter: delayOptions.value.delayEnter,
+    delayLeave: delayOptions.value.delayLeave + (interactive.value ? 100 : 0),
+  });
 const isTooltipHovered = useElementHover(floatingRef, {
   delayEnter: 0, // keep tooltip open when hovering over the tooltip
   delayLeave: delayOptions.value.delayLeave,
 });
 const isTriggered = computed((): boolean => {
-  const triggered = triggerRef.value ?? isTargetHovered.value;
-  const t = triggered || (interactive.value && isTooltipHovered.value);
+  const t = triggerRef.value || (interactive.value && isTooltipHovered.value);
   return t;
 });
 
@@ -155,7 +171,7 @@ const arrowStyles = computed(() => {
 </script>
 
 <template>
-  <span ref="targetRef">
+  <span v-if="isUsingDefaultSlot" ref="defaultSlotRef">
     <slot />
   </span>
   <Teleport v-if="slots.content" to="body">

src/components/Preview.vue

@@ -3,10 +3,12 @@ import MarkdownIt from 'markdown-it';
 import type { Mermaid } from 'mermaid';
 import MarkdownRenderer from './MarkdownRenderer';
 import Floating from './Floating.vue';
-import { onMounted, watch, toRefs, nextTick, inject } from 'vue';
+import TextSelectionMenu from './TextSelectionMenu.vue';
+import { onMounted, watch, toRefs, nextTick, inject, ref } from 'vue';
 
 const $md = inject('$md') as MarkdownIt;
 const $mermaid = inject('$mermaid') as Mermaid;
+const preview = ref();
 
 type Props = {
   content: string,
@@ -55,7 +57,8 @@ const render = (text: string) => $md.render(text);
           </Floating>
         </span>
       </span>
-      <MarkdownRenderer class="preview" :content="render(content)" />
+      <MarkdownRenderer ref="preview" class="preview" :content="render(content)" />
+      <TextSelectionMenu :baseEl="preview" />
     </div>
     <div class="inner-html">
       innerHTML

src/components/TextSelectionMenu.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed, toRefs } from "vue";
+import { useTextSelection, unrefElement } from "@vueuse/core";
+import Floating from "./Floating.vue";
+import type { MaybeElement } from "@vueuse/core";
+import type { VirtualElement } from "@floating-ui/vue";
+
+// interface ----
+
+type Props = {
+  baseEl: MaybeElement;
+};
+const props = defineProps<Props>();
+const { baseEl } = toRefs(props);
+
+// define textselection ----
+
+const { ranges } = useTextSelection();
+
+const trigger = computed((): boolean => {
+  const el = unrefElement(baseEl);
+  const range = ranges.value?.[0];
+  if (!range || range.collapsed || !el || !range.intersectsNode(el)) {
+    return false;
+  }
+  return true;
+});
+
+const target = computed((): VirtualElement | undefined => {
+  const range = ranges.value?.[0];
+  if (!range) {
+    return undefined;
+  }
+  // TODO: スクロールに追従する
+  const virtualEl = {
+    getBoundingClientRect: () => range.getBoundingClientRect(),
+    getClientRects: () => range.getClientRects(),
+  };
+  return virtualEl;
+});
+
+</script>
+
+<template>
+  <Floating placement="top" interactive inline :target="target" :trigger="trigger">
+    <template #content>
+      <!-- TODO: メニュー要素はpropsで受け取る -->
+      <div class="menu">
+        <div class="menu-item">
+          <button>This is</button>
+        </div>
+        <div class="menu-item">
+          <button>Menu</button>
+        </div>
+        <div class="menu-item">
+          <button>Buttons</button>
+        </div>
+      </div>
+    </template>
+  </Floating>
+</template>
+
+<style scoped>
+.menu {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.menu-item {
+  flex: 0 0 fit-content;
+  z-index: 10003;
+
+  +.menu-item {
+    border-left: 1px solid rgb(0 0 0 / .2);;
+  }
+
+  button {
+    padding: 4px 8px;
+    background-color: white;
+    border: 0;
+
+    &:hover {
+      background-color: rgb(0 0 0 / .1);
+    }
+
+    &:active {
+      /*on press in, make the button look like it's being pushed*/
+      transform: translate(0, 2px);
+    }
+  }
+}
+</style>