@riebeckite/plugin-text-fragment 0.0.31 → 0.0.33

package/README.md

@@ -7,6 +7,10 @@ you select in an article.
 
 [日本語](./README_ja.md)
 
+## Live example
+
+Select any sentence on this page. The plugin adds a copy action that produces a URL containing a `#:~:text=` fragment for the selected text.
+
 ## Overview
 
 Client-only plugin. On page load it installs one selection popover with two
@@ -21,17 +25,17 @@ actions:
 
 ```ts
 import { defineConfig } from "@riebeckite/core";
-import { textFragmentPlugin } from "@riebeckite/plugin-text-fragment";
+import { textFragment } from "@riebeckite/plugin-text-fragment";
 
 export default defineConfig({
   // ...
-  plugins: [textFragmentPlugin()],
+  plugins: [textFragment()],
 });
 ```
 
-`textFragmentPlugin()` registers `style.css` and the `initTextFragmentShare`
+`textFragment()` registers `style.css` and the `initTextFragmentShare`
 client entry, which the app calls during page initialization. Pass
-`textFragmentPlugin({ labels })` to override individual UI labels.
+`textFragment({ labels })` to override individual UI labels.
 
 ## Behavior
 
@@ -59,7 +63,7 @@ The fragment follows `#:~:text=[prefix-,]start[,end][,-suffix]`:
 
 ## API
 
-- `textFragmentPlugin(options?)` — plugin factory; `options.labels` overrides
+- `textFragment(options?)` — plugin factory; `options.labels` overrides
   the UI labels
 - `initTextFragmentShare(labels?)` — client initializer (also via
   `@riebeckite/plugin-text-fragment/client`)

package/README_ja.md

@@ -6,6 +6,10 @@
 
 [English](./README.md)
 
+## 実行例
+
+このページの任意の文を選択してください。選択したテキストへの `#:~:text=` フラグメントを含む URL をコピーする操作が追加されます。
+
 ## できること
 
 クライアント専用のプラグインです。ページ表示時に、選択範囲のそばへ小さなポップオーバーを出し、次の二つをコピーできます。
@@ -17,15 +21,15 @@
 
 ```ts
 import { defineConfig } from "@riebeckite/core";
-import { textFragmentPlugin } from "@riebeckite/plugin-text-fragment";
+import { textFragment } from "@riebeckite/plugin-text-fragment";
 
 export default defineConfig({
   // ...
-  plugins: [textFragmentPlugin()],
+  plugins: [textFragment()],
 });
 ```
 
-`textFragmentPlugin()` はスタイルと `initTextFragmentShare` を登録します。初期化処理はアプリのページ初期化時に呼ばれます。`textFragmentPlugin({ labels })` で UI ラベルだけを差し替えられます。
+`textFragment()` はスタイルと `initTextFragmentShare` を登録します。初期化処理はアプリのページ初期化時に呼ばれます。`textFragment({ labels })` で UI ラベルだけを差し替えられます。
 
 ## 挙動
 
@@ -42,12 +46,12 @@ export default defineConfig({
 - `,`、`-`、`&` はパーセントエンコードします（`%2C`、`%2D`、`%26`）。
 - それ以外は UTF-8 単位でエンコードします（改行は `%0A`）。
 - ページ URL に既存のハッシュがあるときは、それを外してからディレクティブを付けます。
-- 200 文字前後より長い選択、または改行を含む選択は、先頭と末尾のトークンによる `start,end` に短縮します。
+- 約 200 文字を超える選択、または改行を含む選択は、先頭と末尾のトークンによる `start,end` に短縮します。
 - 空または空白だけの選択は `""` を返します。
 
 ## 公開 API
 
-- `textFragmentPlugin(options?)`：プラグインファクトリ。`options.labels` で UI ラベルを上書きする
+- `textFragment(options?)`：プラグインファクトリ。`options.labels` で UI ラベルを上書きする
 - `initTextFragmentShare(labels?)`：ブラウザ初期化関数（`@riebeckite/plugin-text-fragment/client` からも読み込める）
 - `encodeTextFragment(text)`：テキスト片をパーセントエンコードする
 - `buildTextFragmentUrl(pageUrl, selection, options?)`：ディープリンクを作る。`options` は `{ prefix?, suffix? }`

package/dist/client.js

@@ -86,6 +86,7 @@ function initTextFragmentShare(labels = {}) {
   popover.appendChild(status);
   document.body.appendChild(popover);
   let active = null;
+  const copyingTimers = /* @__PURE__ */ new Set();
   let isCopying = false;
   const hide = () => {
     active = null;
@@ -118,18 +119,20 @@ function initTextFragmentShare(labels = {}) {
       popover.hidden = false;
       positionPopover(popover, selection.rect);
     } finally {
-      window.setTimeout(() => {
+      const timer = window.setTimeout(() => {
+        copyingTimers.delete(timer);
         isCopying = false;
       }, 0);
+      copyingTimers.add(timer);
     }
   };
-  linkButton.addEventListener("click", () => {
+  const onLinkButtonClick = () => {
     void copy(
       (selection) => buildTextFragmentUrl(resolvePageUrl(), selection),
       resolved.linkCopiedLabel
     );
-  });
-  quoteButton.addEventListener("click", () => {
+  };
+  const onQuoteButtonClick = () => {
     void copy(
       (selection) => buildQuoteMarkdown({
         url: resolvePageUrl(),
@@ -138,23 +141,43 @@ function initTextFragmentShare(labels = {}) {
       }),
       resolved.quoteCopiedLabel
     );
-  });
-  popover.addEventListener("mousedown", (event) => event.preventDefault());
-  document.addEventListener("selectionchange", refresh);
-  document.addEventListener("mouseup", refresh);
-  document.addEventListener("keyup", refresh);
-  document.addEventListener("keydown", (event) => {
+  };
+  const onPopoverMouseDown = (event) => event.preventDefault();
+  const onKeyDown = (event) => {
     if (event.key === "Escape" && !popover.hidden) {
       event.preventDefault();
       hide();
     }
-  });
-  document.addEventListener("mousedown", (event) => {
+  };
+  const onMouseDown = (event) => {
     if (popover.hidden) return;
     if (event.target instanceof Node && popover.contains(event.target)) return;
     hide();
-  });
+  };
+  linkButton.addEventListener("click", onLinkButtonClick);
+  quoteButton.addEventListener("click", onQuoteButtonClick);
+  popover.addEventListener("mousedown", onPopoverMouseDown);
+  document.addEventListener("selectionchange", refresh);
+  document.addEventListener("mouseup", refresh);
+  document.addEventListener("keyup", refresh);
+  document.addEventListener("keydown", onKeyDown);
+  document.addEventListener("mousedown", onMouseDown);
   window.addEventListener("scroll", hide, { passive: true });
+  return () => {
+    initialized = false;
+    for (const timer of copyingTimers) window.clearTimeout(timer);
+    copyingTimers.clear();
+    linkButton.removeEventListener("click", onLinkButtonClick);
+    quoteButton.removeEventListener("click", onQuoteButtonClick);
+    popover.removeEventListener("mousedown", onPopoverMouseDown);
+    document.removeEventListener("selectionchange", refresh);
+    document.removeEventListener("mouseup", refresh);
+    document.removeEventListener("keyup", refresh);
+    document.removeEventListener("keydown", onKeyDown);
+    document.removeEventListener("mousedown", onMouseDown);
+    window.removeEventListener("scroll", hide);
+    popover.remove();
+  };
 }
 function createButton(label) {
   const button = document.createElement("button");

package/dist/index.d.ts

@@ -9,4 +9,4 @@ export type TextFragmentPluginOptions = {
  * Registers the client-only text fragment share plugin: a selection popover
  * that copies a `#:~:text=` deep link or a Markdown quote.
  */
-export declare function textFragmentPlugin(options?: TextFragmentPluginOptions): RiebeckitePlugin;
+export declare function textFragment(options?: TextFragmentPluginOptions): RiebeckitePlugin;

package/dist/index.js

@@ -93,6 +93,7 @@ function initTextFragmentShare(labels = {}) {
   popover.appendChild(status);
   document.body.appendChild(popover);
   let active = null;
+  const copyingTimers = /* @__PURE__ */ new Set();
   let isCopying = false;
   const hide = () => {
     active = null;
@@ -125,18 +126,20 @@ function initTextFragmentShare(labels = {}) {
       popover.hidden = false;
       positionPopover(popover, selection.rect);
     } finally {
-      window.setTimeout(() => {
+      const timer = window.setTimeout(() => {
+        copyingTimers.delete(timer);
         isCopying = false;
       }, 0);
+      copyingTimers.add(timer);
     }
   };
-  linkButton.addEventListener("click", () => {
+  const onLinkButtonClick = () => {
     void copy(
       (selection) => buildTextFragmentUrl(resolvePageUrl(), selection),
       resolved.linkCopiedLabel
     );
-  });
-  quoteButton.addEventListener("click", () => {
+  };
+  const onQuoteButtonClick = () => {
     void copy(
       (selection) => buildQuoteMarkdown({
         url: resolvePageUrl(),
@@ -145,23 +148,43 @@ function initTextFragmentShare(labels = {}) {
       }),
       resolved.quoteCopiedLabel
     );
-  });
-  popover.addEventListener("mousedown", (event) => event.preventDefault());
-  document.addEventListener("selectionchange", refresh);
-  document.addEventListener("mouseup", refresh);
-  document.addEventListener("keyup", refresh);
-  document.addEventListener("keydown", (event) => {
+  };
+  const onPopoverMouseDown = (event) => event.preventDefault();
+  const onKeyDown = (event) => {
     if (event.key === "Escape" && !popover.hidden) {
       event.preventDefault();
       hide();
     }
-  });
-  document.addEventListener("mousedown", (event) => {
+  };
+  const onMouseDown = (event) => {
     if (popover.hidden) return;
     if (event.target instanceof Node && popover.contains(event.target)) return;
     hide();
-  });
+  };
+  linkButton.addEventListener("click", onLinkButtonClick);
+  quoteButton.addEventListener("click", onQuoteButtonClick);
+  popover.addEventListener("mousedown", onPopoverMouseDown);
+  document.addEventListener("selectionchange", refresh);
+  document.addEventListener("mouseup", refresh);
+  document.addEventListener("keyup", refresh);
+  document.addEventListener("keydown", onKeyDown);
+  document.addEventListener("mousedown", onMouseDown);
   window.addEventListener("scroll", hide, { passive: true });
+  return () => {
+    initialized = false;
+    for (const timer of copyingTimers) window.clearTimeout(timer);
+    copyingTimers.clear();
+    linkButton.removeEventListener("click", onLinkButtonClick);
+    quoteButton.removeEventListener("click", onQuoteButtonClick);
+    popover.removeEventListener("mousedown", onPopoverMouseDown);
+    document.removeEventListener("selectionchange", refresh);
+    document.removeEventListener("mouseup", refresh);
+    document.removeEventListener("keyup", refresh);
+    document.removeEventListener("keydown", onKeyDown);
+    document.removeEventListener("mousedown", onMouseDown);
+    window.removeEventListener("scroll", hide);
+    popover.remove();
+  };
 }
 function createButton(label) {
   const button = document.createElement("button");
@@ -249,7 +272,7 @@ function copyWithExecCommand(value) {
 }
 
 // index.ts
-function textFragmentPlugin(options = {}) {
+function textFragment(options = {}) {
   return definePlugin({
     name: "text-fragment",
     assets: [
@@ -277,5 +300,5 @@ export {
   buildTextFragmentUrl,
   encodeTextFragment,
   initTextFragmentShare,
-  textFragmentPlugin
+  textFragment
 };

package/dist/src/text-fragment.client.d.ts

@@ -14,4 +14,4 @@ export declare const DEFAULT_TEXT_FRAGMENT_LABELS: TextFragmentLabels;
  * Client-only: returns immediately when there is no `document`, and only wires
  * its listeners once per page.
  */
-export declare function initTextFragmentShare(labels?: Partial<TextFragmentLabels>): void;
+export declare function initTextFragmentShare(labels?: Partial<TextFragmentLabels>): (() => void) | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-text-fragment",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,7 +21,7 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.31"
+    "@riebeckite/core": "0.0.33"
   },
   "devDependencies": {
     "tsx": "^4.22.4"