@teriusu/rich-editor 0.10.8 → 0.11.0

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();
 
   /*
@@ -72,27 +76,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 {
@@ -109,7 +113,7 @@
     const previousUrl = editor.getAttributes("link").href || "";
     const url = onPromptLink
       ? await onPromptLink(previousUrl)
-      : window.prompt("링크 URL을 입력하세요", previousUrl);
+      : window.prompt(t("promptLinkUrl"), previousUrl);
     if (url === null) return;
     if (url === "") {
       editor.chain().focus().extendMarkRange("link").unsetLink().run();
@@ -265,7 +269,7 @@
                 showBlockMenu = false;
               }}
             >
-              <Type size={12} /> 본문
+              <Type size={12} /> {t('paragraph')}
             </button>
             {#each [1, 2, 3] as level}
               {#if has(level === 1 ? 'h1' : level === 2 ? 'h2' : 'h3')}
@@ -287,7 +291,7 @@
                     showBlockMenu = false;
                   }}
                 >
-                  <Icon size={12} /> 제목 {level}
+                  <Icon size={12} /> {t(level === 1 ? 'heading1' : level === 2 ? 'heading2' : 'heading3')}
                 </button>
               {/if}
             {/each}
@@ -305,7 +309,7 @@
                   showBlockMenu = false;
                 }}
               >
-                <List size={12} /> 글머리 목록
+                <List size={12} /> {t('bulletList')}
               </button>
             {/if}
             {#if has('ordered-list')}
@@ -322,7 +326,7 @@
                   showBlockMenu = false;
                 }}
               >
-                <ListOrdered size={12} /> 번호 목록
+                <ListOrdered size={12} /> {t('orderedList')}
               </button>
             {/if}
             {#if has('checklist')}
@@ -339,7 +343,7 @@
                   showBlockMenu = false;
                 }}
               >
-                <ListChecks size={12} /> 체크리스트
+                <ListChecks size={12} /> {t('taskList')}
               </button>
             {/if}
             {#if has('blockquote')}
@@ -356,7 +360,7 @@
                   showBlockMenu = false;
                 }}
               >
-                <Quote size={12} /> 인용문
+                <Quote size={12} /> {t('blockquote')}
               </button>
             {/if}
           </div>
@@ -371,7 +375,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 +390,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 +405,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 +420,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 +437,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 +458,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")
@@ -474,7 +478,7 @@
       <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")
@@ -490,7 +494,7 @@
         <button
           type="button"
           onclick={() => (showColors = !showColors)}
-          aria-label="글자색"
+          aria-label={t('textColor')}
           class={cn(
             "p-1.5 rounded-full transition-colors",
             editor.getAttributes("textStyle").color
@@ -512,7 +516,7 @@
               {#each TEXT_COLORS as c}
                 <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 +535,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"
@@ -553,7 +557,7 @@
       <button
         type="button"
         onclick={addLink}
-        aria-label="링크"
+        aria-label={t('link')}
         class={cn(
           "p-1.5 rounded-full transition-colors",
           isActive("link")

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;AAgcJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/EmojiSuggestionMenu.svelte

@@ -0,0 +1,291 @@
+<script lang="ts">
+  import type { Editor } from "@tiptap/core";
+  import {
+    findEmojiQuery,
+    searchEmojis,
+    type EmojiSuggestion,
+  } from "../utils/emoji-suggestion";
+
+  /*
+   * 이모지 `:` 자동완성의 **화면 절반** — 판정·검색은 `utils/emoji-suggestion.ts`.
+   *
+   * 슬래시 메뉴와 달리 상태(열림·위치·검색어)를 이 컴포넌트가 전부 들고 있다.
+   * `TipTapEditor` 는 마운트만 한다 — 에디터 update/selectionUpdate 를 여기서 직접
+   * 구독하므로 에디터 쪽에 끼워 넣을 배선이 없다.
+   *
+   * 키보드는 슬래시 메뉴(`SlashCommandMenu`)와 같은 방식: 문서 캡처 단계에서 가로챈다.
+   * `preventDefault` 만으로 충분하다 — prosemirror-view 는 `defaultPrevented` 인 keydown
+   * 을 버린다(설치본 `input.ts` 확인). Tab 이동은 main(emoji.ts)에서 가져온 것이다.
+   */
+  /*
+   * `onOpenChange` 는 실표시(`visible`) 기준 알림이다 — `TipTapEditor` 가 빈 줄 플로팅
+   * 헬퍼를 이 팝업과 동시에 띄우지 않으려고 받는다. 열려 있어도 후보가 없어 안 그리면
+   * (`visible` 주석) 닫힌 것으로 알린다.
+   */
+  let {
+    editor,
+    onOpenChange,
+  }: { editor: Editor; onOpenChange?: (open: boolean) => void } = $props();
+
+  let open = $state(false);
+  let pos = $state({ top: 0, left: 0 });
+  let query = $state("");
+  let range: { from: number; to: number } | null = null;
+  let selectedIndex = $state(0);
+  let menuEl: HTMLDivElement | undefined = $state();
+  let mouseMovedSinceKeyboard = $state(true);
+
+  const items = $derived(searchEmojis(query));
+  /*
+   * 열려 있어도 후보가 없으면 **없는 것처럼** 군다 — 빈 상자를 띄우지 않고, 키보드도
+   * 가로채지 않는다(`:x` 뒤에 일반 문장을 이어 칠 때 Enter 를 뺏으면 안 된다).
+   */
+  const visible = $derived(open && items.length > 0);
+
+  $effect(() => {
+    onOpenChange?.(visible);
+    /* 열린 채로 내려가는 경우(editable 전환 등)에도 닫힘을 알린다. */
+    return () => {
+      if (visible) onOpenChange?.(false);
+    };
+  });
+
+  const MENU_HEIGHT = 320;
+
+  /* `updateSlashMenuPosition`(TipTapEditor)과 같은 계산 — 고정 툴바·하단 바를 피해 뒤집는다. */
+  function updatePosition() {
+    if (!range) return;
+    const coords = editor.view.coordsAtPos(range.to);
+
+    const headerHeight = parseInt(
+      getComputedStyle(document.documentElement).getPropertyValue(
+        "--header-height",
+      ) || "74",
+    );
+    const toolbarEl = editor.view.dom
+      .closest(".hce-editor-wrapper")
+      ?.querySelector(".sticky");
+    const toolbarBottom = toolbarEl
+      ? toolbarEl.getBoundingClientRect().bottom
+      : headerHeight;
+    const topSafe = Math.max(toolbarBottom, headerHeight) + 4;
+
+    const bottomBar = document.querySelector(".sticky.bottom-0");
+    const bottomBarHeight = bottomBar
+      ? bottomBar.getBoundingClientRect().height
+      : 0;
+    const bottomSafe = window.innerHeight - bottomBarHeight - 4;
+
+    const spaceBelow = bottomSafe - coords.bottom;
+    const spaceAbove = coords.top - topSafe;
+    const goUp = spaceBelow < MENU_HEIGHT && spaceAbove > spaceBelow;
+
+    let top: number;
+    if (goUp) {
+      top = Math.max(topSafe, coords.top - MENU_HEIGHT);
+    } else {
+      top = Math.min(coords.bottom + 4, bottomSafe - MENU_HEIGHT);
+    }
+
+    pos = { top, left: coords.left };
+  }
+
+  function close() {
+    open = false;
+    range = null;
+    query = "";
+  }
+
+  /* 문서가 바뀔 때(타이핑) — 열고 닫기 전부 판정한다. */
+  function handleUpdate() {
+    const match = findEmojiQuery(editor.state);
+    if (!match) {
+      if (open) close();
+      return;
+    }
+    range = { from: match.from, to: match.to };
+    if (match.query !== query) {
+      query = match.query;
+      selectedIndex = 0;
+    }
+    open = true;
+    updatePosition();
+  }
+
+  /*
+   * 선택만 움직일 때(클릭·화살표 이동)는 **닫기만** 판정한다 — 슬래시 메뉴의
+   * `handleSelectionUpdate` 와 같은 비대칭. 옛 `:word` 텍스트를 클릭했다고 팝업이
+   * 열리면 안 된다.
+   */
+  function handleSelectionUpdate() {
+    if (!open) return;
+    if (!findEmojiQuery(editor.state)) close();
+  }
+
+  $effect(() => {
+    editor.on("update", handleUpdate);
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    return () => {
+      editor.off("update", handleUpdate);
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  });
+
+  function select(item: EmojiSuggestion) {
+    if (!range) return;
+    const { from, to } = range;
+    close();
+    // main 과 같은 삽입 꼴 — `:query` 를 지우고 이모지 + 공백.
+    editor
+      .chain()
+      .focus()
+      .deleteRange({ from, to })
+      .insertContent(`${item.emoji} `)
+      .run();
+  }
+
+  $effect(() => {
+    if (!visible) return;
+    const onScroll = () => updatePosition();
+    window.addEventListener("scroll", onScroll, true);
+    return () => window.removeEventListener("scroll", onScroll, true);
+  });
+
+  $effect(() => {
+    if (!visible) return;
+    function handleMouseDown(e: MouseEvent) {
+      if (menuEl && !menuEl.contains(e.target as Node)) close();
+    }
+    document.addEventListener("mousedown", handleMouseDown, true);
+    return () =>
+      document.removeEventListener("mousedown", handleMouseDown, true);
+  });
+
+  $effect(() => {
+    if (!visible) return;
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "ArrowDown" || (e.key === "Tab" && !e.shiftKey)) {
+        e.preventDefault();
+        mouseMovedSinceKeyboard = false;
+        selectedIndex = (selectedIndex + 1) % items.length;
+      } else if (e.key === "ArrowUp" || (e.key === "Tab" && e.shiftKey)) {
+        e.preventDefault();
+        mouseMovedSinceKeyboard = false;
+        selectedIndex =
+          selectedIndex <= 0 ? items.length - 1 : selectedIndex - 1;
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const item = items[selectedIndex];
+        if (item) select(item);
+      } else if (e.key === "Escape") {
+        // main 처럼 친 텍스트는 남기고 팝업만 접는다(다음 글자를 치면 다시 뜬다).
+        e.preventDefault();
+        open = false;
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => document.removeEventListener("keydown", handleKeyDown, true);
+  });
+
+  $effect(() => {
+    // 선택 항목을 보이는 자리로
+    if (menuEl) {
+      const el = menuEl.querySelector(`[data-index="${selectedIndex}"]`);
+      el?.scrollIntoView({ block: "nearest" });
+    }
+  });
+</script>
+
+{#if visible}
+  <div class="fixed z-50" style="top: {pos.top}px; left: {pos.left}px">
+    <div
+      bind:this={menuEl}
+      class="emoji-menu z-50 bg-popover border border-border rounded-xl shadow-xl overflow-y-auto py-1.5"
+    >
+      {#each items as item, i (item.keyword)}
+        <button
+          type="button"
+          data-index={i}
+          class="emoji-item {i === selectedIndex ? 'is-selected' : ''}"
+          onmousemove={() => {
+            if (!mouseMovedSinceKeyboard) {
+              mouseMovedSinceKeyboard = true;
+              return;
+            }
+            selectedIndex = i;
+          }}
+          onclick={() => select(item)}
+        >
+          <span class="emoji-glyph">{item.emoji}</span>
+          <span class="emoji-keyword">{item.keyword}</span>
+        </button>
+      {/each}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .emoji-menu {
+    width: 224px;
+    max-height: 320px;
+  }
+
+  /* `SlashCommandMenu` 의 .slash-item 과 같은 결 — 두 팝업이 같은 물건으로 보여야 한다. */
+  .emoji-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 4px 10px;
+    text-align: left;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--foreground);
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    transition: background-color 0.12s;
+  }
+
+  .emoji-item:hover,
+  .emoji-item.is-selected {
+    background: color-mix(in srgb, var(--primary) 8%, transparent);
+    color: var(--primary);
+  }
+
+  .emoji-item.is-selected::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 3px;
+    bottom: 3px;
+    width: 3px;
+    border-radius: 0 2px 2px 0;
+    background: var(--primary);
+  }
+
+  .emoji-glyph {
+    flex-shrink: 0;
+    width: 20px;
+    font-size: 15px;
+    line-height: 1;
+    text-align: center;
+  }
+
+  .emoji-keyword {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 11px;
+    color: var(--muted-foreground);
+  }
+
+  .emoji-item.is-selected .emoji-keyword,
+  .emoji-item:hover .emoji-keyword {
+    color: var(--primary);
+  }
+</style>

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

@@ -0,0 +1,9 @@
+import type { Editor } from "@tiptap/core";
+type $$ComponentProps = {
+    editor: Editor;
+    onOpenChange?: (open: boolean) => void;
+};
+declare const EmojiSuggestionMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type EmojiSuggestionMenu = ReturnType<typeof EmojiSuggestionMenu>;
+export default EmojiSuggestionMenu;
+//# sourceMappingURL=EmojiSuggestionMenu.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiSuggestionMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/components/EmojiSuggestionMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAO1C,KAAK,gBAAgB,GAAI;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CAAE,CAAC;AA0NrF,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}