@teriusu/rich-editor 0.11.1 → 0.11.3

package/dist/components/BubbleToolbar.svelte

@@ -24,6 +24,7 @@
     ListChecks,
     Quote,
     ChevronDown,
+    Check,
     Sigma,
   } from "lucide-svelte";
   import { cn } from "../utils/cn";
@@ -75,6 +76,8 @@
   let menuEl: HTMLDivElement | undefined = $state();
   let blockMenuEl: HTMLDivElement | undefined = $state();
   let colorMenuEl: HTMLDivElement | undefined = $state();
+  let blockPopupEl: HTMLDivElement | undefined = $state();
+  let colorPopupEl: HTMLDivElement | undefined = $state();
   const iconSize = 14;
 
   const TEXT_COLORS: { labelKey: EditorMessageKey; value: string }[] = [
@@ -100,16 +103,6 @@
     return t("paragraph");
   }
 
-  function isParagraphActive(): boolean {
-    return (
-      !isActive("heading") &&
-      !isActive("bulletList") &&
-      !isActive("orderedList") &&
-      !isActive("taskList") &&
-      !isActive("blockquote")
-    );
-  }
-
   async function addLink() {
     const selection = editor.state.selection.getBookmark();
     const documentBeforePrompt = editor.state.doc;
@@ -142,10 +135,10 @@
     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)) {
+    if (showBlockMenu && blockMenuEl && !blockMenuEl.contains(target) && !blockPopupEl?.contains(target)) {
       showBlockMenu = false;
     }
-    if (showColors && colorMenuEl && !colorMenuEl.contains(target)) {
+    if (showColors && colorMenuEl && !colorMenuEl.contains(target) && !colorPopupEl?.contains(target)) {
       showColors = false;
     }
   }
@@ -173,7 +166,9 @@
     const themeTokens = [
       '--border', '--background', '--foreground', '--popover', '--muted',
       '--muted-foreground', '--primary', '--primary-foreground', '--accent',
-      '--accent-foreground', '--ring', '--hce-menu-z', '--hce-menu-surface'
+      '--accent-foreground', '--ring', '--hce-menu-z', '--hce-menu-surface',
+      '--wh-100', '--wh-500', '--gray-500', '--gray-700', '--gray-900',
+      '--primary-500', '--color-line', '--radius-8', '--radius-2xl', '--shadow-popup'
     ];
     const syncTheme = () => {
       const hostStyle = getComputedStyle(editor.view.dom);
@@ -190,7 +185,7 @@
       const left = viewport?.offsetLeft ?? 0;
       const top = viewport?.offsetTop ?? 0;
       anchor.style.left = `${left + width / 2}px`;
-      anchor.style.top = `${top + height}px`;
+      anchor.style.top = `calc(${top + height}px - env(safe-area-inset-bottom, 0px))`;
       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`);
     };
@@ -327,139 +322,125 @@
   );
 </script>
 
-<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 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} />
-          {getCurrentBlockLabel()}
-          <ChevronDown size={12} />
-        </button>
-        {#if showBlockMenu}
+{#snippet blockItem(labelKey: EditorMessageKey, Icon: typeof Type, select: () => void)}
+  {@const selected = getCurrentBlockLabel() === t(labelKey)}
+  <button
+    type="button"
+    class="block-menu-item"
+    role="menuitemradio"
+    aria-checked={selected}
+    onclick={() => { select(); showBlockMenu = false; }}
+  >
+    <span class="block-menu-icon"><Icon size={16} /></span>
+    <span class="block-menu-label">{t(labelKey)}</span>
+    {#if selected}<span class="block-menu-check"><Check size={16} /></span>{/if}
+  </button>
+{/snippet}
+
+{#snippet blockPopover()}
+  {#if showBlockMenu}
+    <div
+      bind:this={blockPopupEl}
+      class="bubble-popover bubble-block-menu absolute bottom-full left-0 mb-1"
+      onmousedown={(e) => e.preventDefault()}
+      role="menu"
+      aria-orientation="vertical"
+      tabindex="-1"
+    >
+      {@render blockItem('paragraph', Type, () => { editor.chain().focus().setParagraph().run(); })}
+      {#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}
+          {@render blockItem(
+            level === 1 ? 'heading1' : level === 2 ? 'heading2' : 'heading3', Icon,
+            () => { editor.chain().focus().toggleHeading({ level: level as 1 | 2 | 3 }).run(); }
+          )}
+        {/if}
+      {/each}
+      {#if has('bullet-list')}
+        {@render blockItem('bulletList', List, () => { editor.chain().focus().toggleBulletList().run(); })}
+      {/if}
+      {#if has('ordered-list')}
+        {@render blockItem('orderedList', ListOrdered, () => { editor.chain().focus().toggleOrderedList().run(); })}
+      {/if}
+      {#if has('checklist')}
+        {@render blockItem('taskList', ListChecks, () => { editor.chain().focus().toggleTaskList().run(); })}
+      {/if}
+      {#if has('blockquote')}
+        {@render blockItem('blockquote', Quote, () => { editor.chain().focus().toggleBlockquote().run(); })}
+      {/if}
+    </div>
+  {/if}
+{/snippet}
+
+{#snippet colorPopover()}
+        {#if showColors}
           <div
-            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"
+            bind:this={colorPopupEl}
+            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"
           >
-            <button
-              type="button"
-              class={cn(
-                "w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
-                isParagraphActive()
-                  ? "hce-active"
-                  : "text-muted-foreground hover:text-foreground hover:bg-muted",
-              )}
-              onclick={() => {
-                editor.chain().focus().setParagraph().run();
-                showBlockMenu = false;
-              }}
-            >
-              <Type size={12} /> {t('paragraph')}
-            </button>
-            {#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}
+            <div class="grid grid-cols-3 gap-1.5">
+              {#each TEXT_COLORS as c (c.value)}
                 <button
                   type="button"
-                  class={cn(
-                    "w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
-                    isActive("heading", { level })
-                      ? "hce-active"
-                      : "text-muted-foreground hover:text-foreground hover:bg-muted",
-                  )}
+                  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={() => {
-                    editor
-                      .chain()
-                      .focus()
-                      .toggleHeading({ level: level as 1 | 2 | 3 })
-                      .run();
-                    showBlockMenu = false;
+                    if (c.value) {
+                      editor.chain().focus().setColor(c.value).run();
+                    } else {
+                      editor.chain().focus().unsetColor().run();
+                    }
+                    showColors = false;
                   }}
                 >
-                  <Icon size={12} /> {t(level === 1 ? 'heading1' : level === 2 ? 'heading2' : 'heading3')}
+                  {c.value ? "A" : "×"}
                 </button>
-              {/if}
-            {/each}
-            {#if has('bullet-list')}
-              <button
-                type="button"
-                class={cn(
-                  "w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
-                  isActive("bulletList")
-                    ? "hce-active"
-                    : "text-muted-foreground hover:text-foreground hover:bg-muted",
-                )}
-                onclick={() => {
-                  editor.chain().focus().toggleBulletList().run();
-                  showBlockMenu = false;
-                }}
-              >
-                <List size={12} /> {t('bulletList')}
-              </button>
-            {/if}
-            {#if has('ordered-list')}
-              <button
-                type="button"
-                class={cn(
-                  "w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
-                  isActive("orderedList")
-                    ? "hce-active"
-                    : "text-muted-foreground hover:text-foreground hover:bg-muted",
-                )}
-                onclick={() => {
-                  editor.chain().focus().toggleOrderedList().run();
-                  showBlockMenu = false;
-                }}
-              >
-                <ListOrdered size={12} /> {t('orderedList')}
-              </button>
-            {/if}
-            {#if has('checklist')}
-              <button
-                type="button"
-                class={cn(
-                  "w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
-                  isActive("taskList")
-                    ? "hce-active"
-                    : "text-muted-foreground hover:text-foreground hover:bg-muted",
-                )}
-                onclick={() => {
-                  editor.chain().focus().toggleTaskList().run();
-                  showBlockMenu = false;
-                }}
-              >
-                <ListChecks size={12} /> {t('taskList')}
-              </button>
-            {/if}
-            {#if has('blockquote')}
-              <button
-                type="button"
-                class={cn(
-                  "w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
-                  isActive("blockquote")
-                    ? "hce-active"
-                    : "text-muted-foreground hover:text-foreground hover:bg-muted",
-                )}
-                onclick={() => {
-                  editor.chain().focus().toggleBlockquote().run();
-                  showBlockMenu = false;
+              {/each}
+            </div>
+            <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>{t('customColor')}</span>
+              <input
+                type="color"
+                class="h-6 w-10 cursor-pointer rounded border border-border bg-transparent p-0"
+                value={(editor.getAttributes("textStyle").color as string) || "#000000"}
+                onclick={(e) => e.stopPropagation()}
+                oninput={(e) => {
+                  const v = (e.target as HTMLInputElement).value;
+                  editor.chain().focus().setColor(v).run();
                 }}
-              >
-                <Quote size={12} /> {t('blockquote')}
-              </button>
-            {/if}
+              />
+            </label>
           </div>
         {/if}
+{/snippet}
+
+<div bind:this={menuEl} class="bubble-toolbar-container" class:mobile style="visibility: hidden">
+  <div class="rounded-full hce-floating-panel">
+    <div class="bubble-toolbar-rail flex items-center gap-0.5 px-1.5 py-1 rounded-full">
+    {#if hasBlockMenu}
+      <!-- Block type selector -->
+      <div class="relative bubble-popover-anchor" bind:this={blockMenuEl}>
+        <button
+          type="button"
+          onclick={() => (showBlockMenu = !showBlockMenu)}
+          aria-haspopup="menu"
+          aria-label={getCurrentBlockLabel()}
+          aria-expanded={showBlockMenu}
+          class="bubble-block-trigger 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={mobile ? 14 : 12} />
+          {#if !mobile}{getCurrentBlockLabel()}{/if}
+          <ChevronDown size={mobile ? 8 : 12} />
+        </button>
+        {#if !mobile}{@render blockPopover()}{/if}
       </div>
 
       <div class="bubble-divider w-px h-5 bg-border mx-0.5"></div>
@@ -601,51 +582,7 @@
         >
           <Palette size={iconSize} />
         </button>
-        {#if showColors}
-          <div
-            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 (c.value)}
-                <button
-                  type="button"
-                  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={() => {
-                    if (c.value) {
-                      editor.chain().focus().setColor(c.value).run();
-                    } else {
-                      editor.chain().focus().unsetColor().run();
-                    }
-                    showColors = false;
-                  }}
-                >
-                  {c.value ? "A" : "×"}
-                </button>
-              {/each}
-            </div>
-            <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>{t('customColor')}</span>
-              <input
-                type="color"
-                class="h-6 w-10 cursor-pointer rounded border border-border bg-transparent p-0"
-                value={(editor.getAttributes("textStyle").color as string) || "#000000"}
-                onclick={(e) => e.stopPropagation()}
-                oninput={(e) => {
-                  const v = (e.target as HTMLInputElement).value;
-                  editor.chain().focus().setColor(v).run();
-                }}
-              />
-            </label>
-          </div>
-        {/if}
+        {#if !mobile}{@render colorPopover()}{/if}
       </div>
     {/if}
 
@@ -665,25 +602,40 @@
         <LinkIcon size={iconSize} />
       </button>
     {/if}
+    </div>
+    {#if mobile}
+      {@render blockPopover()}
+      {@render colorPopover()}
+    {/if}
   </div>
 </div>
 
 <style>
   .mobile .hce-floating-panel {
+    border-radius: 8px;
+    padding: 1px 3px;
+  }
+  .mobile .bubble-toolbar-rail {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    border-radius: 12px;
-    padding: 4px;
-    padding-bottom: max(4px, env(safe-area-inset-bottom));
+    flex-wrap: nowrap;
+    max-width: 100%;
+    gap: 1px;
+    padding: 0;
   }
-  .mobile button {
-    min-width: 44px;
-    min-height: 44px;
+  .mobile .bubble-toolbar-rail > * { flex-shrink: 0; }
+  .mobile .bubble-toolbar-rail button {
+    width: 28px;
+    height: 28px;
+    padding: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
+  .mobile .bubble-toolbar-rail .bubble-block-trigger {
+    width: 32px;
+    gap: 1px;
+  }
+  .mobile .bubble-popover:not(.bubble-block-menu) button { min-width: 44px; min-height: 44px; }
   .mobile input[type="color"] { min-width: 44px; min-height: 44px; }
   .mobile .bubble-divider { display: none; }
   .mobile .bubble-popover-anchor { position: static; }
@@ -693,4 +645,39 @@
     max-height: min(var(--bubble-popup-height, 50dvh), 300px);
     overflow-y: auto;
   }
+  .bubble-block-menu {
+    width: 200px;
+    box-sizing: border-box;
+    padding: 4px;
+    background: var(--wh-100, var(--popover, var(--background, #fff)));
+    border: 1px solid var(--color-line, var(--border));
+    border-radius: var(--radius-2xl, 12px);
+    box-shadow: var(--shadow-popup, 0 8px 24px rgb(0 0 0 / 12%));
+  }
+  .mobile .bubble-block-menu { right: auto; max-width: 100%; }
+  .block-menu-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 32px;
+    gap: 8px;
+    padding: 6px 8px;
+    border-radius: var(--radius-8, 8px);
+    color: var(--gray-700, var(--foreground));
+    font: inherit;
+    font-size: 13px;
+    line-height: 20px;
+    text-align: left;
+    white-space: nowrap;
+  }
+  .block-menu-item:hover, .block-menu-item:focus-visible {
+    background: var(--wh-500, var(--muted));
+  }
+  .block-menu-item[aria-checked='true'] {
+    color: var(--gray-900, var(--foreground));
+    font-weight: 600;
+  }
+  .block-menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+  .block-menu-icon { display: inline-flex; flex: none; color: var(--gray-500, var(--muted-foreground)); }
+  .block-menu-check { display: inline-flex; flex: none; color: var(--primary-500, var(--primary)); }
 </style>

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teriusu/rich-editor",
-  "version": "0.11.1",
+  "version": "0.11.3",
   "description": "TipTap 기반 Notion-style 리치 텍스트 에디터 (Svelte)",
   "type": "module",
   "svelte": "./dist/index.js",