@lalternative/editor 0.1.0 → 0.2.0

package/dist/diff-uFiP8hD5.d.ts

@@ -0,0 +1,52 @@
+/**
+ * RichNode is one node of a TipTap document.
+ *
+ * The index signature is what lets a document cross the boundary with an
+ * editor handle typed as a plain object, which is how TipTap hands its JSON
+ * back. Without it every call site pays for the mismatch in casts.
+ */
+interface RichNode {
+    type?: string;
+    attrs?: Record<string, unknown>;
+    content?: RichNode[];
+    text?: string;
+    [key: string]: unknown;
+}
+type RichDoc = RichNode;
+interface BlockShape {
+    type: "paragraph" | "heading";
+    level?: number;
+}
+/**
+ * blocksFromDoc flattens a TipTap document to the text of its top-level nodes.
+ *
+ * Marks are dropped rather than encoded: the diff compares prose, and a bold
+ * span that moved inside an otherwise identical sentence is not a change worth
+ * asking the reviewer about.
+ */
+declare function blocksFromDoc(doc: RichDoc): string[];
+/** shapesFromDoc records what each block was, so a revision can be rebuilt
+ *  without turning every heading into a paragraph. */
+declare function shapesFromDoc(doc: RichDoc): BlockShape[];
+declare function docFromBlocks(blocks: string[], shapes?: BlockShape[]): RichDoc;
+
+type ChangeKind = "keep" | "insert" | "delete" | "replace";
+interface BlockChange {
+    id: string;
+    kind: ChangeKind;
+    before: string;
+    after: string;
+}
+/**
+ * diffBlocks compares two documents one block at a time.
+ *
+ * The block is the unit because it is the unit a reviewer accepts or rejects:
+ * a finer diff turns one editorial decision into a dozen clicks, and a coarser
+ * one makes rejecting a single sentence cost the whole section.
+ *
+ * Accepting every change rebuilds `after` exactly; rejecting every change
+ * rebuilds `before` exactly. The UI relies on both.
+ */
+declare function diffBlocks(before: string[], after: string[]): BlockChange[];
+
+export { type BlockChange as B, type ChangeKind as C, type RichDoc as R, type BlockShape as a, type RichNode as b, blocksFromDoc as c, diffBlocks as d, docFromBlocks as e, shapesFromDoc as s };

package/dist/editor.css

@@ -5,6 +5,99 @@
   --lalt-editor-insert-bg: rgb(29 78 216 / 0.08);
   --lalt-editor-delete: #b91c1c;
   --lalt-editor-delete-bg: rgb(185 28 28 / 0.06);
+  --lalt-editor-surface: #ffffff;
+  --lalt-editor-border: rgb(0 0 0 / 0.1);
+  --lalt-editor-hover: rgb(0 0 0 / 0.06);
+}
+
+/* Defaults only: a host that owns a theme overrides these on :root and never
+   reaches this block. Without it the toolbar is a white slab on a dark page. */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --lalt-editor-insert: #93c5fd;
+    --lalt-editor-insert-bg: rgb(147 197 253 / 0.12);
+    --lalt-editor-delete: #fca5a5;
+    --lalt-editor-delete-bg: rgb(252 165 165 / 0.1);
+    --lalt-editor-surface: #1f2937;
+    --lalt-editor-border: rgb(255 255 255 / 0.14);
+    --lalt-editor-hover: rgb(255 255 255 / 0.08);
+  }
+}
+
+.lalt-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+  background: var(--lalt-editor-surface, #ffffff);
+  border: 1px solid var(--lalt-editor-border, rgb(0 0 0 / 0.1));
+  box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
+  user-select: none;
+}
+
+.lalt-toolbar__button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  background: none;
+  border: none;
+  font: inherit;
+  font-size: 0.875rem;
+  cursor: pointer;
+  color: inherit;
+}
+
+.lalt-toolbar__button:hover {
+  background: var(--lalt-editor-hover, rgb(0 0 0 / 0.06));
+}
+
+.lalt-toolbar__formats {
+  position: relative;
+}
+
+.lalt-toolbar__menu {
+  position: absolute;
+  top: calc(100% + 0.375rem);
+  right: 0;
+  min-width: 14rem;
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+  background: var(--lalt-editor-surface, #ffffff);
+  border: 1px solid var(--lalt-editor-border, rgb(0 0 0 / 0.1));
+  box-shadow: 0 8px 24px rgb(0 0 0 / 0.16);
+}
+
+.lalt-toolbar__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.375rem;
+  background: none;
+  border: none;
+  font: inherit;
+  font-size: 0.875rem;
+  text-align: left;
+  cursor: pointer;
+  color: inherit;
+}
+
+.lalt-toolbar__item:hover {
+  background: var(--lalt-editor-hover, rgb(0 0 0 / 0.06));
+}
+
+.lalt-toolbar__item[aria-current="true"] {
+  font-weight: 600;
+}
+
+.lalt-toolbar__shortcut {
+  font-size: 0.75rem;
+  opacity: 0.5;
 }
 
 .lalt-revision {

package/dist/index.d.ts

@@ -1,52 +1,92 @@
+export { B as BlockChange, a as BlockShape, C as ChangeKind, R as RichDoc, b as RichNode, c as blocksFromDoc, d as diffBlocks, e as docFromBlocks, s as shapesFromDoc } from './diff-uFiP8hD5.js';
+import * as react from 'react';
+import { Editor } from '@tiptap/react';
+
+interface SelectionRect {
+    /** Horizontal centre of the selection. */
+    x: number;
+    top: number;
+    bottom: number;
+}
+interface Size {
+    width: number;
+    height: number;
+}
+interface PlaceToolbarInput {
+    selection: SelectionRect;
+    toolbar: Size;
+    viewport: Size;
+    /** iOS renders its own callout above a selection, which covers a toolbar
+     *  placed there, so the caller asks for below on that platform. */
+    preferBelow?: boolean;
+}
+interface ToolbarPlacement {
+    left: number;
+    top: number;
+    below: boolean;
+}
 /**
- * RichNode is one node of a TipTap document.
+ * placeToolbar positions a floating toolbar against a selection.
  *
- * The index signature is what lets a document cross the boundary with an
- * editor handle typed as a plain object, which is how TipTap hands its JSON
- * back. Without it every call site pays for the mismatch in casts.
+ * Kept apart from the component because it is the part that is wrong in subtle
+ * ways — off-screen at the edges, hidden under a system callout — and the part
+ * a test can pin down without a browser.
  */
-interface RichNode {
-    type?: string;
-    attrs?: Record<string, unknown>;
-    content?: RichNode[];
-    text?: string;
-    [key: string]: unknown;
-}
-type RichDoc = RichNode;
-interface BlockShape {
-    type: "paragraph" | "heading";
-    level?: number;
+declare function placeToolbar({ selection, toolbar, viewport, preferBelow, }: PlaceToolbarInput): ToolbarPlacement;
+
+interface ToolbarAction {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    onSelect: (selectedText: string) => void;
+}
+interface BlockFormat {
+    id: string;
+    label: string;
+    shortcut?: string;
+    isActive?: boolean;
+    onSelect: () => void;
+}
+interface SelectionToolbarProps {
+    selectedText: string;
+    selection: SelectionRect;
+    actions?: ToolbarAction[];
+    /** Heading levels and list kinds, rendered behind a single trigger. */
+    formats?: BlockFormat[];
+    formatsLabel?: string;
+    /** iOS draws its own callout above a selection; the host detects it. */
+    preferBelow?: boolean;
+    container?: HTMLElement | null;
+}
+declare function SelectionToolbar({ selectedText, selection, actions, formats, formatsLabel, preferBelow, container, }: SelectionToolbarProps): react.ReactPortal | null;
+
+interface SelectionInfo {
+    text: string;
+    rect: SelectionRect;
 }
 /**
- * blocksFromDoc flattens a TipTap document to the text of its top-level nodes.
+ * useSelectionToolbar reports the current non-empty selection of an editor.
  *
- * Marks are dropped rather than encoded: the diff compares prose, and a bold
- * span that moved inside an otherwise identical sentence is not a change worth
- * asking the reviewer about.
+ * Returns null whenever there is nothing to act on, so the caller renders the
+ * toolbar only while it has a target.
  */
-declare function blocksFromDoc(doc: RichDoc): string[];
-/** shapesFromDoc records what each block was, so a revision can be rebuilt
- *  without turning every heading into a paragraph. */
-declare function shapesFromDoc(doc: RichDoc): BlockShape[];
-declare function docFromBlocks(blocks: string[], shapes?: BlockShape[]): RichDoc;
+declare function useSelectionToolbar(editor: Editor | null): SelectionInfo | null;
 
-type ChangeKind = "keep" | "insert" | "delete" | "replace";
-interface BlockChange {
-    id: string;
-    kind: ChangeKind;
-    before: string;
-    after: string;
+interface FormatLabels {
+    paragraph: string;
+    heading1: string;
+    heading2: string;
+    heading3: string;
+    orderedList: string;
+    bulletList: string;
 }
+declare const defaultFormatLabels: FormatLabels;
 /**
- * diffBlocks compares two documents one block at a time.
- *
- * The block is the unit because it is the unit a reviewer accepts or rejects:
- * a finer diff turns one editorial decision into a dozen clicks, and a coarser
- * one makes rejecting a single sentence cost the whole section.
+ * blockFormats is the set a writer reaches for on a selected passage.
  *
- * Accepting every change rebuilds `after` exactly; rejecting every change
- * rebuilds `before` exactly. The UI relies on both.
+ * Labels are passed in rather than translated here: the package carries no
+ * i18n runtime, so the host names things in whatever language it speaks.
  */
-declare function diffBlocks(before: string[], after: string[]): BlockChange[];
+declare function blockFormats(editor: Editor | null, labels?: FormatLabels): BlockFormat[];
 
-export { type BlockChange, type BlockShape, type ChangeKind, type RichDoc, type RichNode, blocksFromDoc, diffBlocks, docFromBlocks, shapesFromDoc };
+export { type BlockFormat, type FormatLabels, type PlaceToolbarInput, type SelectionInfo, type SelectionRect, SelectionToolbar, type SelectionToolbarProps, type ToolbarAction, type ToolbarPlacement, blockFormats, defaultFormatLabels, placeToolbar, useSelectionToolbar };

package/dist/index.js

@@ -4,10 +4,218 @@ import {
   docFromBlocks,
   shapesFromDoc
 } from "./chunk-7GOSVZTI.js";
+
+// src/placement.ts
+var GAP = 8;
+function placeToolbar({
+  selection,
+  toolbar,
+  viewport,
+  preferBelow = false
+}) {
+  const fitsAbove = selection.top - GAP - toolbar.height >= 0;
+  const fitsBelow = selection.bottom + GAP + toolbar.height <= viewport.height;
+  const below = preferBelow ? fitsBelow || !fitsAbove : !fitsAbove && fitsBelow;
+  const top = below ? selection.bottom + GAP : Math.max(0, selection.top - GAP - toolbar.height);
+  const centred = selection.x - toolbar.width / 2;
+  const left = Math.max(0, Math.min(centred, viewport.width - toolbar.width));
+  return { left, top, below };
+}
+
+// src/SelectionToolbar.tsx
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FALLBACK = { width: 320, height: 40 };
+function SelectionToolbar({
+  selectedText,
+  selection,
+  actions = [],
+  formats = [],
+  formatsLabel = "Format",
+  preferBelow = false,
+  container
+}) {
+  const ref = useRef(null);
+  const [size, setSize] = useState(FALLBACK);
+  const [formatsOpen, setFormatsOpen] = useState(false);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    if (rect.width > 0) setSize({ width: rect.width, height: rect.height });
+  }, [selectedText, actions.length, formats.length]);
+  useEffect(() => {
+    if (!formatsOpen) return;
+    const close = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setFormatsOpen(false);
+    };
+    document.addEventListener("mousedown", close);
+    return () => document.removeEventListener("mousedown", close);
+  }, [formatsOpen]);
+  if (typeof document === "undefined") return null;
+  const place = placeToolbar({
+    selection,
+    toolbar: size,
+    viewport: { width: window.innerWidth, height: window.innerHeight },
+    preferBelow
+  });
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "toolbar",
+        className: "lalt-toolbar",
+        style: { position: "fixed", left: place.left, top: place.top, zIndex: 100 },
+        children: [
+          actions.map((action) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "lalt-toolbar__button",
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => action.onSelect(selectedText),
+              children: [
+                action.icon,
+                /* @__PURE__ */ jsx("span", { children: action.label })
+              ]
+            },
+            action.id
+          )),
+          formats.length > 0 && /* @__PURE__ */ jsxs("div", { className: "lalt-toolbar__formats", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "lalt-toolbar__button",
+                "aria-haspopup": "menu",
+                "aria-expanded": formatsOpen,
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => setFormatsOpen((open) => !open),
+                children: formatsLabel
+              }
+            ),
+            formatsOpen && /* @__PURE__ */ jsx("div", { role: "menu", className: "lalt-toolbar__menu", children: formats.map((format) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: "lalt-toolbar__item",
+                "aria-current": format.isActive,
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => {
+                  format.onSelect();
+                  setFormatsOpen(false);
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: format.label }),
+                  format.shortcut && /* @__PURE__ */ jsx("kbd", { className: "lalt-toolbar__shortcut", children: format.shortcut })
+                ]
+              },
+              format.id
+            )) })
+          ] })
+        ]
+      }
+    ),
+    container ?? document.body
+  );
+}
+
+// src/useSelectionToolbar.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+function useSelectionToolbar(editor) {
+  const [selection, setSelection] = useState2(null);
+  useEffect2(() => {
+    if (!editor) return;
+    const read = () => {
+      const { state } = editor;
+      const { from, to, empty } = state.selection;
+      if (empty || !editor.isFocused) {
+        setSelection(null);
+        return;
+      }
+      const text = state.doc.textBetween(from, to, " ").trim();
+      if (text === "") {
+        setSelection(null);
+        return;
+      }
+      const start = editor.view.coordsAtPos(from);
+      const end = editor.view.coordsAtPos(to);
+      setSelection({
+        text,
+        rect: {
+          x: (start.left + end.right) / 2,
+          top: Math.min(start.top, end.top),
+          bottom: Math.max(start.bottom, end.bottom)
+        }
+      });
+    };
+    read();
+    editor.on("selectionUpdate", read);
+    editor.on("blur", read);
+    editor.on("focus", read);
+    return () => {
+      editor.off("selectionUpdate", read);
+      editor.off("blur", read);
+      editor.off("focus", read);
+    };
+  }, [editor]);
+  return selection;
+}
+
+// src/formats.ts
+var defaultFormatLabels = {
+  paragraph: "Texte",
+  heading1: "Titre 1",
+  heading2: "Titre 2",
+  heading3: "Titre 3",
+  orderedList: "Liste num\xE9rot\xE9e",
+  bulletList: "Liste \xE0 puces"
+};
+function blockFormats(editor, labels = defaultFormatLabels) {
+  if (!editor) return [];
+  return [
+    {
+      id: "paragraph",
+      label: labels.paragraph,
+      shortcut: "Ctrl+Alt+0",
+      isActive: editor.isActive("paragraph"),
+      onSelect: () => editor.chain().focus().setParagraph().run()
+    },
+    ...[1, 2, 3].map((level) => ({
+      id: `heading${level}`,
+      label: labels[`heading${level}`],
+      shortcut: `Ctrl+Alt+${level}`,
+      isActive: editor.isActive("heading", { level }),
+      onSelect: () => editor.chain().focus().toggleHeading({ level }).run()
+    })),
+    {
+      id: "orderedList",
+      label: labels.orderedList,
+      shortcut: "Ctrl+Alt+4",
+      isActive: editor.isActive("orderedList"),
+      onSelect: () => editor.chain().focus().toggleOrderedList().run()
+    },
+    {
+      id: "bulletList",
+      label: labels.bulletList,
+      shortcut: "Ctrl+Alt+5",
+      isActive: editor.isActive("bulletList"),
+      onSelect: () => editor.chain().focus().toggleBulletList().run()
+    }
+  ];
+}
 export {
+  SelectionToolbar,
+  blockFormats,
   blocksFromDoc,
+  defaultFormatLabels,
   diffBlocks,
   docFromBlocks,
-  shapesFromDoc
+  placeToolbar,
+  shapesFromDoc,
+  useSelectionToolbar
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"sources":["../src/placement.ts","../src/SelectionToolbar.tsx","../src/useSelectionToolbar.ts","../src/formats.ts"],"sourcesContent":["export interface SelectionRect {\n  /** Horizontal centre of the selection. */\n  x: number;\n  top: number;\n  bottom: number;\n}\n\nexport interface Size {\n  width: number;\n  height: number;\n}\n\nexport interface PlaceToolbarInput {\n  selection: SelectionRect;\n  toolbar: Size;\n  viewport: Size;\n  /** iOS renders its own callout above a selection, which covers a toolbar\n   *  placed there, so the caller asks for below on that platform. */\n  preferBelow?: boolean;\n}\n\nexport interface ToolbarPlacement {\n  left: number;\n  top: number;\n  below: boolean;\n}\n\nconst GAP = 8;\n\n/**\n * placeToolbar positions a floating toolbar against a selection.\n *\n * Kept apart from the component because it is the part that is wrong in subtle\n * ways — off-screen at the edges, hidden under a system callout — and the part\n * a test can pin down without a browser.\n */\nexport function placeToolbar({\n  selection,\n  toolbar,\n  viewport,\n  preferBelow = false,\n}: PlaceToolbarInput): ToolbarPlacement {\n  const fitsAbove = selection.top - GAP - toolbar.height >= 0;\n  const fitsBelow = selection.bottom + GAP + toolbar.height <= viewport.height;\n\n  const below = preferBelow ? fitsBelow || !fitsAbove : !fitsAbove && fitsBelow;\n\n  const top = below\n    ? selection.bottom + GAP\n    : Math.max(0, selection.top - GAP - toolbar.height);\n\n  const centred = selection.x - toolbar.width / 2;\n  const left = Math.max(0, Math.min(centred, viewport.width - toolbar.width));\n\n  return { left, top, below };\n}\n","import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { placeToolbar, type SelectionRect } from \"./placement\";\n\nexport interface ToolbarAction {\n  id: string;\n  label: string;\n  icon?: React.ReactNode;\n  onSelect: (selectedText: string) => void;\n}\n\nexport interface BlockFormat {\n  id: string;\n  label: string;\n  shortcut?: string;\n  isActive?: boolean;\n  onSelect: () => void;\n}\n\nexport interface SelectionToolbarProps {\n  selectedText: string;\n  selection: SelectionRect;\n  actions?: ToolbarAction[];\n  /** Heading levels and list kinds, rendered behind a single trigger. */\n  formats?: BlockFormat[];\n  formatsLabel?: string;\n  /** iOS draws its own callout above a selection; the host detects it. */\n  preferBelow?: boolean;\n  container?: HTMLElement | null;\n}\n\nconst FALLBACK = { width: 320, height: 40 };\n\nexport function SelectionToolbar({\n  selectedText,\n  selection,\n  actions = [],\n  formats = [],\n  formatsLabel = \"Format\",\n  preferBelow = false,\n  container,\n}: SelectionToolbarProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [size, setSize] = useState(FALLBACK);\n  const [formatsOpen, setFormatsOpen] = useState(false);\n\n  // Measured after paint rather than assumed: the toolbar's width depends on\n  // labels the host supplies, and guessing it puts the toolbar off-centre.\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    if (rect.width > 0) setSize({ width: rect.width, height: rect.height });\n  }, [selectedText, actions.length, formats.length]);\n\n  useEffect(() => {\n    if (!formatsOpen) return;\n    const close = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) setFormatsOpen(false);\n    };\n    document.addEventListener(\"mousedown\", close);\n    return () => document.removeEventListener(\"mousedown\", close);\n  }, [formatsOpen]);\n\n  if (typeof document === \"undefined\") return null;\n\n  const place = placeToolbar({\n    selection,\n    toolbar: size,\n    viewport: { width: window.innerWidth, height: window.innerHeight },\n    preferBelow,\n  });\n\n  return createPortal(\n    <div\n      ref={ref}\n      role=\"toolbar\"\n      className=\"lalt-toolbar\"\n      style={{ position: \"fixed\", left: place.left, top: place.top, zIndex: 100 }}\n    >\n      {actions.map((action) => (\n        <button\n          key={action.id}\n          type=\"button\"\n          className=\"lalt-toolbar__button\"\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={() => action.onSelect(selectedText)}\n        >\n          {action.icon}\n          <span>{action.label}</span>\n        </button>\n      ))}\n\n      {formats.length > 0 && (\n        <div className=\"lalt-toolbar__formats\">\n          <button\n            type=\"button\"\n            className=\"lalt-toolbar__button\"\n            aria-haspopup=\"menu\"\n            aria-expanded={formatsOpen}\n            onMouseDown={(e) => e.preventDefault()}\n            onClick={() => setFormatsOpen((open) => !open)}\n          >\n            {formatsLabel}\n          </button>\n          {formatsOpen && (\n            <div role=\"menu\" className=\"lalt-toolbar__menu\">\n              {formats.map((format) => (\n                <button\n                  key={format.id}\n                  type=\"button\"\n                  role=\"menuitem\"\n                  className=\"lalt-toolbar__item\"\n                  aria-current={format.isActive}\n                  onMouseDown={(e) => e.preventDefault()}\n                  onClick={() => {\n                    format.onSelect();\n                    setFormatsOpen(false);\n                  }}\n                >\n                  <span>{format.label}</span>\n                  {format.shortcut && (\n                    <kbd className=\"lalt-toolbar__shortcut\">{format.shortcut}</kbd>\n                  )}\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n    </div>,\n    container ?? document.body,\n  );\n}\n","import { useEffect, useState } from \"react\";\nimport type { Editor } from \"@tiptap/react\";\n\nimport type { SelectionRect } from \"./placement\";\n\nexport interface SelectionInfo {\n  text: string;\n  rect: SelectionRect;\n}\n\n/**\n * useSelectionToolbar reports the current non-empty selection of an editor.\n *\n * Returns null whenever there is nothing to act on, so the caller renders the\n * toolbar only while it has a target.\n */\nexport function useSelectionToolbar(editor: Editor | null): SelectionInfo | null {\n  const [selection, setSelection] = useState<SelectionInfo | null>(null);\n\n  useEffect(() => {\n    if (!editor) return;\n\n    const read = () => {\n      const { state } = editor;\n      const { from, to, empty } = state.selection;\n      if (empty || !editor.isFocused) {\n        setSelection(null);\n        return;\n      }\n\n      const text = state.doc.textBetween(from, to, \" \").trim();\n      if (text === \"\") {\n        setSelection(null);\n        return;\n      }\n\n      const start = editor.view.coordsAtPos(from);\n      const end = editor.view.coordsAtPos(to);\n      setSelection({\n        text,\n        rect: {\n          x: (start.left + end.right) / 2,\n          top: Math.min(start.top, end.top),\n          bottom: Math.max(start.bottom, end.bottom),\n        },\n      });\n    };\n\n    read();\n    editor.on(\"selectionUpdate\", read);\n    editor.on(\"blur\", read);\n    editor.on(\"focus\", read);\n    return () => {\n      editor.off(\"selectionUpdate\", read);\n      editor.off(\"blur\", read);\n      editor.off(\"focus\", read);\n    };\n  }, [editor]);\n\n  return selection;\n}\n","import type { Editor } from \"@tiptap/react\";\n\n// Type-only: these commands are contributed by StarterKit's extensions, and\n// without the reference TypeScript does not know they exist on a chain. No\n// runtime import, so the host stays in charge of which extensions it mounts —\n// blockFormats simply returns entries whose commands no-op if one is missing.\nimport type {} from \"@tiptap/starter-kit\";\n\nimport type { BlockFormat } from \"./SelectionToolbar\";\n\nexport interface FormatLabels {\n  paragraph: string;\n  heading1: string;\n  heading2: string;\n  heading3: string;\n  orderedList: string;\n  bulletList: string;\n}\n\nexport const defaultFormatLabels: FormatLabels = {\n  paragraph: \"Texte\",\n  heading1: \"Titre 1\",\n  heading2: \"Titre 2\",\n  heading3: \"Titre 3\",\n  orderedList: \"Liste numérotée\",\n  bulletList: \"Liste à puces\",\n};\n\n/**\n * blockFormats is the set a writer reaches for on a selected passage.\n *\n * Labels are passed in rather than translated here: the package carries no\n * i18n runtime, so the host names things in whatever language it speaks.\n */\nexport function blockFormats(\n  editor: Editor | null,\n  labels: FormatLabels = defaultFormatLabels,\n): BlockFormat[] {\n  if (!editor) return [];\n\n  return [\n    {\n      id: \"paragraph\",\n      label: labels.paragraph,\n      shortcut: \"Ctrl+Alt+0\",\n      isActive: editor.isActive(\"paragraph\"),\n      onSelect: () => editor.chain().focus().setParagraph().run(),\n    },\n    ...([1, 2, 3] as const).map((level) => ({\n      id: `heading${level}`,\n      label: labels[`heading${level}` as keyof FormatLabels],\n      shortcut: `Ctrl+Alt+${level}`,\n      isActive: editor.isActive(\"heading\", { level }),\n      onSelect: () => editor.chain().focus().toggleHeading({ level }).run(),\n    })),\n    {\n      id: \"orderedList\",\n      label: labels.orderedList,\n      shortcut: \"Ctrl+Alt+4\",\n      isActive: editor.isActive(\"orderedList\"),\n      onSelect: () => editor.chain().focus().toggleOrderedList().run(),\n    },\n    {\n      id: \"bulletList\",\n      label: labels.bulletList,\n      shortcut: \"Ctrl+Alt+5\",\n      isActive: editor.isActive(\"bulletList\"),\n      onSelect: () => editor.chain().focus().toggleBulletList().run(),\n    },\n  ];\n}\n"],"mappings":"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","names":["useEffect","useState"]}

package/dist/revisions.d.ts

@@ -1,5 +1,5 @@
-import { BlockChange, RichDoc } from './index.js';
-export { ChangeKind } from './index.js';
+import { B as BlockChange, R as RichDoc } from './diff-uFiP8hD5.js';
+export { C as ChangeKind } from './diff-uFiP8hD5.js';
 
 type Decision = "pending" | "accepted" | "rejected";
 interface RevisionState {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lalternative/editor",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Shared TipTap editor for L'Alternative apps: rich text, format menu, selection toolbar and inline AI revisions",
   "type": "module",
   "main": "./dist/index.js",
@@ -54,5 +54,10 @@
     "type": "git",
     "url": "https://github.com/lalternative/packages.git",
     "directory": "editor"
+  },
+  "peerDependenciesMeta": {
+    "@tiptap/starter-kit": {
+      "optional": true
+    }
   }
 }