@teriusu/rich-editor 0.10.8 → 0.11.1

package/dist/components/BubbleToolbar.svelte

@@ -28,15 +28,19 @@
   } from "lucide-svelte";
   import { cn } from "../utils/cn";
   import type { ToolbarFeature, PromptHandler } from "../types";
+  import { defaultTranslator, type EditorMessageKey, type EditorTranslator } from "../i18n";
 
   let {
     editor,
     features,
     onPromptLink,
+    t = defaultTranslator,
   }: {
     editor: Editor;
     features: Set<ToolbarFeature>;
     onPromptLink?: PromptHandler;
+    /** 에디터 UI 번역 함수. 미주입 시 ko. */
+    t?: EditorTranslator;
   } = $props();
 
   /*
@@ -65,6 +69,7 @@
 
   const has = (f: ToolbarFeature) => features.has(f);
 
+  let mobile = $state(false);
   let showBlockMenu = $state(false);
   let showColors = $state(false);
   let menuEl: HTMLDivElement | undefined = $state();
@@ -72,27 +77,27 @@
   let colorMenuEl: HTMLDivElement | undefined = $state();
   const iconSize = 14;
 
-  const TEXT_COLORS = [
-    { label: "기본", value: "" },
-    { label: "검정", value: "#000000" },
-    { label: "회색", value: "#6b7280" },
-    { label: "빨강", value: "#dc2626" },
-    { label: "주황", value: "#ea580c" },
-    { label: "노랑", value: "#ca8a04" },
-    { label: "초록", value: "#16a34a" },
-    { label: "파랑", value: "#2563eb" },
-    { label: "보라", value: "#7c3aed" }
+  const TEXT_COLORS: { labelKey: EditorMessageKey; value: string }[] = [
+    { labelKey: "colorDefault", value: "" },
+    { labelKey: "colorBlack", value: "#000000" },
+    { labelKey: "colorGray", value: "#6b7280" },
+    { labelKey: "colorRed", value: "#dc2626" },
+    { labelKey: "colorOrange", value: "#ea580c" },
+    { labelKey: "colorYellow", value: "#ca8a04" },
+    { labelKey: "colorGreen", value: "#16a34a" },
+    { labelKey: "colorBlue", value: "#2563eb" },
+    { labelKey: "colorPurple", value: "#7c3aed" }
   ];
 
   function getCurrentBlockLabel(): string {
-    if (isActive("heading", { level: 1 })) return "제목 1";
-    if (isActive("heading", { level: 2 })) return "제목 2";
-    if (isActive("heading", { level: 3 })) return "제목 3";
-    if (isActive("bulletList")) return "글머리 목록";
-    if (isActive("orderedList")) return "번호 목록";
-    if (isActive("taskList")) return "체크리스트";
-    if (isActive("blockquote")) return "인용문";
-    return "본문";
+    if (isActive("heading", { level: 1 })) return t("heading1");
+    if (isActive("heading", { level: 2 })) return t("heading2");
+    if (isActive("heading", { level: 3 })) return t("heading3");
+    if (isActive("bulletList")) return t("bulletList");
+    if (isActive("orderedList")) return t("orderedList");
+    if (isActive("taskList")) return t("taskList");
+    if (isActive("blockquote")) return t("blockquote");
+    return t("paragraph");
   }
 
   function isParagraphActive(): boolean {
@@ -106,11 +111,18 @@
   }
 
   async function addLink() {
+    const selection = editor.state.selection.getBookmark();
+    const documentBeforePrompt = editor.state.doc;
     const previousUrl = editor.getAttributes("link").href || "";
     const url = onPromptLink
       ? await onPromptLink(previousUrl)
-      : window.prompt("링크 URL을 입력하세요", previousUrl);
-    if (url === null) return;
+      : window.prompt(t("promptLinkUrl"), previousUrl);
+    if (url === null || editor.isDestroyed || editor.state.doc !== documentBeforePrompt) return;
+    try {
+      editor.view.dispatch(editor.state.tr.setSelection(selection.resolve(editor.state.doc)));
+    } catch {
+      return;
+    }
     if (url === "") {
       editor.chain().focus().extendMarkRange("link").unsetLink().run();
     } else {
@@ -123,8 +135,13 @@
     }
   }
 
-  function handleDocClick(e: MouseEvent) {
+  function handleDocClick(e: Event) {
     const target = e.target as Node;
+    // The upstream plugin treats any focus inside the menu's parent as internal.
+    // A body portal needs an explicit boundary so another input/editor dismisses it.
+    if (mobile && menuEl && !menuEl.contains(target) && !editor.view.dom.contains(target)) {
+      editor.view.dispatch(editor.state.tr.setMeta(bubbleToolbarKey, 'hide'));
+    }
     if (showBlockMenu && blockMenuEl && !blockMenuEl.contains(target)) {
       showBlockMenu = false;
     }
@@ -143,12 +160,74 @@
   onMount(() => {
     if (!menuEl) return;
 
+    const element = menuEl;
+    const media = window.matchMedia('(max-width: 767px), (pointer: coarse)');
+    const viewport = window.visualViewport;
+    const anchor = document.createElement('span');
+    anchor.style.cssText = 'position:fixed;width:0;height:0;pointer-events:none;visibility:hidden';
+    anchor.setAttribute('aria-hidden', 'true');
+    document.body.appendChild(anchor);
+    mobile = media.matches;
+
+    // A portal leaves the host wrapper, where apps map their own theme to editor tokens.
+    const themeTokens = [
+      '--border', '--background', '--foreground', '--popover', '--muted',
+      '--muted-foreground', '--primary', '--primary-foreground', '--accent',
+      '--accent-foreground', '--ring', '--hce-menu-z', '--hce-menu-surface'
+    ];
+    const syncTheme = () => {
+      const hostStyle = getComputedStyle(editor.view.dom);
+      for (const token of themeTokens) {
+        const value = mobile ? hostStyle.getPropertyValue(token) : '';
+        if (value) element.style.setProperty(token, value);
+        else element.style.removeProperty(token);
+      }
+    };
+    const syncViewport = () => {
+      syncTheme();
+      const width = viewport?.width ?? window.innerWidth;
+      const height = viewport?.height ?? window.innerHeight;
+      const left = viewport?.offsetLeft ?? 0;
+      const top = viewport?.offsetTop ?? 0;
+      anchor.style.left = `${left + width / 2}px`;
+      anchor.style.top = `${top + height}px`;
+      element.style.maxWidth = mobile ? `${Math.max(0, width - 16)}px` : '';
+      element.style.setProperty('--bubble-popup-height', `${Math.max(44, height - element.getBoundingClientRect().height - 24)}px`);
+    };
+    syncViewport();
+
+    const positionOptions = () => mobile
+      ? { strategy: 'fixed' as const, placement: 'top' as const, flip: false, shift: false, offset: 8 }
+      : { strategy: 'absolute' as const, placement: 'top' as const, flip: true, shift: true, offset: 8 };
+    const updatePosition = () => {
+      if (editor.isDestroyed) return;
+      syncViewport();
+      editor.view.dispatch(editor.state.tr.setMeta(bubbleToolbarKey, 'updatePosition'));
+    };
+    const updateMode = () => {
+      mobile = media.matches;
+      syncViewport();
+      editor.view.dispatch(editor.state.tr.setMeta(bubbleToolbarKey, {
+        type: 'updateOptions', options: { options: positionOptions() }
+      }));
+      if (element.isConnected) {
+        (mobile ? document.body : editor.view.dom.parentElement)?.appendChild(element);
+      }
+      updatePosition();
+    };
+    // Prevent button focus from collapsing the text selection; native OS menus remain enabled.
+    const preserveSelection = (event: MouseEvent) => {
+      if (mobile && (event.target as HTMLElement).closest('button')) event.preventDefault();
+    };
     const plugin = BubbleMenuPlugin({
       pluginKey: bubbleToolbarKey,
       editor,
-      element: menuEl,
+      element,
+      appendTo: () => mobile ? document.body : editor.view.dom.parentElement!,
+      getReferencedVirtualElement: () => mobile ? anchor : null,
       shouldShow: ({ editor: e, state }) => {
         const { from, to } = state.selection;
+        if (!e.isEditable || (!e.view.hasFocus() && !element.contains(document.activeElement))) return false;
         if (from === to) return false;
         /*
          * ⚠️ **덩어리를 고른 것(NodeSelection)에는 뜨지 않는다.**
@@ -193,18 +272,36 @@
        * 마침 v3 기본값이 `placement: "top"` + `flip`·`shift` 활성이라 화면상 차이는 없었지만,
        * 죽은 설정을 남겨 두면 "위치를 지정해 뒀다"고 착각하게 된다.
        */
-      options: {
-        placement: "top",
-      },
+      options: { ...positionOptions(), onShow: syncTheme },
     });
 
     editor.registerPlugin(plugin);
-    document.addEventListener("mousedown", handleDocClick);
+    const themeObserver = new MutationObserver(syncTheme);
+    themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'style', 'data-theme'] });
+    themeObserver.observe(document.body, { attributes: true, attributeFilter: ['class', 'style', 'data-theme'] });
+    const observer = new ResizeObserver(updatePosition);
+    observer.observe(element);
+    media.addEventListener('change', updateMode);
+    viewport?.addEventListener('resize', updatePosition);
+    viewport?.addEventListener('scroll', updatePosition);
+    window.addEventListener('resize', updatePosition);
+    element.addEventListener('mousedown', preserveSelection);
+    document.addEventListener("pointerdown", handleDocClick);
+    document.addEventListener("focusin", handleDocClick);
     document.addEventListener("keydown", handleKeydown);
 
     return () => {
       editor.unregisterPlugin(bubbleToolbarKey);
-      document.removeEventListener("mousedown", handleDocClick);
+      observer.disconnect();
+      themeObserver.disconnect();
+      anchor.remove();
+      media.removeEventListener('change', updateMode);
+      viewport?.removeEventListener('resize', updatePosition);
+      viewport?.removeEventListener('scroll', updatePosition);
+      window.removeEventListener('resize', updatePosition);
+      element.removeEventListener('mousedown', preserveSelection);
+      document.removeEventListener("pointerdown", handleDocClick);
+      document.removeEventListener("focusin", handleDocClick);
       document.removeEventListener("keydown", handleKeydown);
     };
   });
@@ -230,14 +327,16 @@
   );
 </script>
 
-<div bind:this={menuEl} class="bubble-toolbar-container" style="visibility: hidden">
+<div bind:this={menuEl} class="bubble-toolbar-container" class:mobile style="visibility: hidden">
   <div class="flex items-center gap-0.5 px-1.5 py-1 rounded-full hce-floating-panel">
     {#if hasBlockMenu}
       <!-- Block type selector -->
-      <div class="relative" bind:this={blockMenuEl}>
+      <div class="relative bubble-popover-anchor" bind:this={blockMenuEl}>
         <button
           type="button"
           onclick={() => (showBlockMenu = !showBlockMenu)}
+          aria-haspopup="menu"
+          aria-expanded={showBlockMenu}
           class="flex items-center gap-1 px-2.5 py-1.5 rounded-full text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
         >
           <Type size={12} />
@@ -246,7 +345,7 @@
         </button>
         {#if showBlockMenu}
           <div
-            class="absolute bottom-full left-0 mb-1 bg-popover border border-border rounded-lg shadow-xl py-1"
+            class="bubble-popover absolute bottom-full left-0 mb-1 bg-popover border border-border rounded-lg shadow-xl py-1"
             style="min-width: 140px"
             onmousedown={(e) => e.preventDefault()}
             role="menu"
@@ -265,9 +364,9 @@
                 showBlockMenu = false;
               }}
             >
-              <Type size={12} /> 본문
+              <Type size={12} /> {t('paragraph')}
             </button>
-            {#each [1, 2, 3] as level}
+            {#each [1, 2, 3] as level (level)}
               {#if has(level === 1 ? 'h1' : level === 2 ? 'h2' : 'h3')}
                 {@const Icon = level === 1 ? Heading1 : level === 2 ? Heading2 : Heading3}
                 <button
@@ -287,7 +386,7 @@
                     showBlockMenu = false;
                   }}
                 >
-                  <Icon size={12} /> 제목 {level}
+                  <Icon size={12} /> {t(level === 1 ? 'heading1' : level === 2 ? 'heading2' : 'heading3')}
                 </button>
               {/if}
             {/each}
@@ -305,7 +404,7 @@
                   showBlockMenu = false;
                 }}
               >
-                <List size={12} /> 글머리 목록
+                <List size={12} /> {t('bulletList')}
               </button>
             {/if}
             {#if has('ordered-list')}
@@ -322,7 +421,7 @@
                   showBlockMenu = false;
                 }}
               >
-                <ListOrdered size={12} /> 번호 목록
+                <ListOrdered size={12} /> {t('orderedList')}
               </button>
             {/if}
             {#if has('checklist')}
@@ -339,7 +438,7 @@
                   showBlockMenu = false;
                 }}
               >
-                <ListChecks size={12} /> 체크리스트
+                <ListChecks size={12} /> {t('taskList')}
               </button>
             {/if}
             {#if has('blockquote')}
@@ -356,14 +455,14 @@
                   showBlockMenu = false;
                 }}
               >
-                <Quote size={12} /> 인용문
+                <Quote size={12} /> {t('blockquote')}
               </button>
             {/if}
           </div>
         {/if}
       </div>
 
-      <div class="w-px h-5 bg-border mx-0.5"></div>
+      <div class="bubble-divider w-px h-5 bg-border mx-0.5"></div>
     {/if}
 
     <!-- Format buttons -->
@@ -371,7 +470,7 @@
     <button
       type="button"
       onclick={() => editor.chain().focus().toggleBold().run()}
-      aria-label="굵게"
+      aria-label={t('bold')}
       class={cn(
         "p-1.5 rounded-full transition-colors",
         isActive("bold")
@@ -386,7 +485,7 @@
     <button
       type="button"
       onclick={() => editor.chain().focus().toggleItalic().run()}
-      aria-label="기울임"
+      aria-label={t('italic')}
       class={cn(
         "p-1.5 rounded-full transition-colors",
         isActive("italic")
@@ -401,7 +500,7 @@
       <button
         type="button"
         onclick={() => editor.chain().focus().toggleUnderline().run()}
-        aria-label="밑줄"
+        aria-label={t('underline')}
         class={cn(
           "p-1.5 rounded-full transition-colors",
           isActive("underline")
@@ -416,7 +515,7 @@
     <button
       type="button"
       onclick={() => editor.chain().focus().toggleStrike().run()}
-      aria-label="취소선"
+      aria-label={t('strike')}
       class={cn(
         "p-1.5 rounded-full transition-colors",
         isActive("strike")
@@ -433,7 +532,7 @@
     <button
       type="button"
       onclick={() => editor.chain().focus().toggleCode().run()}
-      aria-label="코드"
+      aria-label={t('code')}
       class={cn(
         "p-1.5 rounded-full transition-colors",
         isActive("code")
@@ -454,7 +553,7 @@
     <button
       type="button"
       onclick={() => editor.chain().focus().toggleMathInline().run()}
-      aria-label="인라인 수식"
+      aria-label={t('mathInline')}
       class={cn(
         "p-1.5 rounded-full transition-colors",
         isActive("math_inline")
@@ -467,14 +566,14 @@
     {/if}
 
     {#if has('highlight') || has('text-color')}
-      <div class="w-px h-5 bg-border mx-0.5"></div>
+      <div class="bubble-divider w-px h-5 bg-border mx-0.5"></div>
     {/if}
 
     {#if has('highlight')}
       <button
         type="button"
         onclick={() => editor.chain().focus().toggleHighlight().run()}
-        aria-label="하이라이트"
+        aria-label={t('highlight')}
         class={cn(
           "p-1.5 rounded-full transition-colors",
           isActive("highlight")
@@ -486,11 +585,13 @@
       </button>
     {/if}
     {#if has('text-color')}
-      <div class="relative" bind:this={colorMenuEl}>
+      <div class="relative bubble-popover-anchor" bind:this={colorMenuEl}>
         <button
           type="button"
           onclick={() => (showColors = !showColors)}
-          aria-label="글자색"
+          aria-haspopup="menu"
+          aria-expanded={showColors}
+          aria-label={t('textColor')}
           class={cn(
             "p-1.5 rounded-full transition-colors",
             editor.getAttributes("textStyle").color
@@ -502,17 +603,17 @@
         </button>
         {#if showColors}
           <div
-            class="absolute bottom-full left-0 mb-1 bg-popover border border-border rounded-lg shadow-xl p-2"
+            class="bubble-popover absolute bottom-full left-0 mb-1 bg-popover border border-border rounded-lg shadow-xl p-2"
             style="min-width: 160px"
             onmousedown={(e) => e.preventDefault()}
             role="menu"
             tabindex="-1"
           >
             <div class="grid grid-cols-3 gap-1.5">
-              {#each TEXT_COLORS as c}
+              {#each TEXT_COLORS as c (c.value)}
                 <button
                   type="button"
-                  title={c.label}
+                  title={t(c.labelKey)}
                   class="h-7 rounded-md border border-border transition-transform hover:scale-105 flex items-center justify-center text-xs font-bold"
                   style="color: {c.value || '#000'}; background: #fff"
                   onclick={() => {
@@ -531,7 +632,7 @@
             <label
               class="hce-color-divider mt-2 pt-2 flex items-center justify-between gap-2 px-1 text-xs text-muted-foreground cursor-pointer hover:text-foreground"
             >
-              <span>직접 선택</span>
+              <span>{t('customColor')}</span>
               <input
                 type="color"
                 class="h-6 w-10 cursor-pointer rounded border border-border bg-transparent p-0"
@@ -549,11 +650,11 @@
     {/if}
 
     {#if has('link')}
-      <div class="w-px h-5 bg-border mx-0.5"></div>
+      <div class="bubble-divider w-px h-5 bg-border mx-0.5"></div>
       <button
         type="button"
         onclick={addLink}
-        aria-label="링크"
+        aria-label={t('link')}
         class={cn(
           "p-1.5 rounded-full transition-colors",
           isActive("link")
@@ -566,3 +667,30 @@
     {/if}
   </div>
 </div>
+
+<style>
+  .mobile .hce-floating-panel {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    border-radius: 12px;
+    padding: 4px;
+    padding-bottom: max(4px, env(safe-area-inset-bottom));
+  }
+  .mobile button {
+    min-width: 44px;
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .mobile input[type="color"] { min-width: 44px; min-height: 44px; }
+  .mobile .bubble-divider { display: none; }
+  .mobile .bubble-popover-anchor { position: static; }
+  .mobile .bubble-popover {
+    left: 0;
+    right: 0;
+    max-height: min(var(--bubble-popup-height, 50dvh), 300px);
+    overflow-y: auto;
+  }
+</style>

package/dist/components/BubbleToolbar.svelte.d.ts

@@ -1,9 +1,12 @@
 import type { Editor } from "@tiptap/core";
 import type { ToolbarFeature, PromptHandler } from "../types";
+import { type EditorTranslator } from "../i18n";
 type $$ComponentProps = {
     editor: Editor;
     features: Set<ToolbarFeature>;
     onPromptLink?: PromptHandler;
+    /** 에디터 UI 번역 함수. 미주입 시 ko. */
+    t?: EditorTranslator;
 };
 declare const BubbleToolbar: import("svelte").Component<$$ComponentProps, {}, "">;
 type BubbleToolbar = ReturnType<typeof BubbleToolbar>;

package/dist/components/BubbleToolbar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BubbleToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/BubbleToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AA0B3C,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7D,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B,CAAC;AA8bJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"BubbleToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/BubbleToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AA0B3C,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC9D,OAAO,EAA4C,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEzF,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,8BAA8B;IAC9B,CAAC,CAAC,EAAE,gBAAgB,CAAC;CACtB,CAAC;AA+hBJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}