From 0b96a0b915ea9020f01ee2e6f5545e2d9fdebcec Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Fri, 8 Nov 2024 08:51:26 +0100
Subject: [PATCH 01/22] =?UTF-8?q?refactor(json-crdt-peritext-ui):=20?=
 =?UTF-8?q?=F0=9F=92=A1=20rename=20plugin=20related=20objects?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/json-crdt-peritext-ui/__demos__/components/App.tsx      | 4 ++--
 .../{renderers => plugins}/debug/RenderBlock.tsx            | 0
 .../{renderers => plugins}/debug/RenderInline.tsx           | 0
 .../{renderers => plugins}/debug/RenderPeritext.tsx         | 0
 .../{renderers => plugins}/debug/context.ts                 | 0
 .../{renderers => plugins}/debug/index.tsx                  | 4 ++--
 .../{renderers/default => plugins/minimal}/Button/index.tsx | 0
 .../{renderers/default => plugins/minimal}/Chrome/index.tsx | 0
 .../{renderers/default => plugins/minimal}/RenderAnchor.tsx | 0
 .../{renderers/default => plugins/minimal}/RenderCaret.tsx  | 0
 .../{renderers/default => plugins/minimal}/RenderFocus.tsx  | 0
 .../{renderers/default => plugins/minimal}/RenderInline.tsx | 0
 .../default => plugins/minimal}/RenderPeritext.tsx          | 0
 .../default => plugins/minimal}/TopToolbar/index.tsx        | 0
 .../{renderers/default => plugins/minimal}/constants.ts     | 0
 .../{renderers/default => plugins/minimal}/context.ts       | 0
 .../{renderers/default => plugins/minimal}/index.ts         | 4 ++--
 src/json-crdt-peritext-ui/react/PeritextView.tsx            | 6 +++---
 src/json-crdt-peritext-ui/react/context.ts                  | 4 ++--
 src/json-crdt-peritext-ui/react/types.ts                    | 2 +-
 20 files changed, 12 insertions(+), 12 deletions(-)
 rename src/json-crdt-peritext-ui/{renderers => plugins}/debug/RenderBlock.tsx (100%)
 rename src/json-crdt-peritext-ui/{renderers => plugins}/debug/RenderInline.tsx (100%)
 rename src/json-crdt-peritext-ui/{renderers => plugins}/debug/RenderPeritext.tsx (100%)
 rename src/json-crdt-peritext-ui/{renderers => plugins}/debug/context.ts (100%)
 rename src/json-crdt-peritext-ui/{renderers => plugins}/debug/index.tsx (86%)
 rename src/json-crdt-peritext-ui/{renderers/default => plugins/minimal}/Button/index.tsx (100%)
 rename src/json-crdt-peritext-ui/{renderers/default => plugins/minimal}/Chrome/index.tsx (100%)
 rename src/json-crdt-peritext-ui/{renderers/default => plugins/minimal}/RenderAnchor.tsx (100%)
 rename src/json-crdt-peritext-ui/{renderers/default => plugins/minimal}/RenderCaret.tsx (100%)
 rename src/json-crdt-peritext-ui/{renderers/default => plugins/minimal}/RenderFocus.tsx (100%)
 rename src/json-crdt-peritext-ui/{renderers/default => plugins/minimal}/RenderInline.tsx (100%)
 rename src/json-crdt-peritext-ui/{renderers/default => plugins/minimal}/RenderPeritext.tsx (100%)
 rename src/json-crdt-peritext-ui/{renderers/default => plugins/minimal}/TopToolbar/index.tsx (100%)
 rename src/json-crdt-peritext-ui/{renderers/default => plugins/minimal}/constants.ts (100%)
 rename src/json-crdt-peritext-ui/{renderers/default => plugins/minimal}/context.ts (100%)
 rename src/json-crdt-peritext-ui/{renderers/default => plugins/minimal}/index.ts (93%)

diff --git a/src/json-crdt-peritext-ui/__demos__/components/App.tsx b/src/json-crdt-peritext-ui/__demos__/components/App.tsx
index fd93dd004e..a79f36ba4a 100644
--- a/src/json-crdt-peritext-ui/__demos__/components/App.tsx
+++ b/src/json-crdt-peritext-ui/__demos__/components/App.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import {Provider, GlobalCss} from 'nano-theme';
 import {ModelWithExt, ext} from '../../../json-crdt-extensions';
 import {PeritextView} from '../../react';
-import {renderers} from '../../renderers/default';
-import {renderers as debugRenderers} from '../../renderers/debug';
+import {renderers} from '../../plugins/minimal';
+import {renderers as debugRenderers} from '../../plugins/debug';
 
 export const App: React.FC = () => {
   const [[model, peritext]] = React.useState(() => {
diff --git a/src/json-crdt-peritext-ui/renderers/debug/RenderBlock.tsx b/src/json-crdt-peritext-ui/plugins/debug/RenderBlock.tsx
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/debug/RenderBlock.tsx
rename to src/json-crdt-peritext-ui/plugins/debug/RenderBlock.tsx
diff --git a/src/json-crdt-peritext-ui/renderers/debug/RenderInline.tsx b/src/json-crdt-peritext-ui/plugins/debug/RenderInline.tsx
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/debug/RenderInline.tsx
rename to src/json-crdt-peritext-ui/plugins/debug/RenderInline.tsx
diff --git a/src/json-crdt-peritext-ui/renderers/debug/RenderPeritext.tsx b/src/json-crdt-peritext-ui/plugins/debug/RenderPeritext.tsx
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/debug/RenderPeritext.tsx
rename to src/json-crdt-peritext-ui/plugins/debug/RenderPeritext.tsx
diff --git a/src/json-crdt-peritext-ui/renderers/debug/context.ts b/src/json-crdt-peritext-ui/plugins/debug/context.ts
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/debug/context.ts
rename to src/json-crdt-peritext-ui/plugins/debug/context.ts
diff --git a/src/json-crdt-peritext-ui/renderers/debug/index.tsx b/src/json-crdt-peritext-ui/plugins/debug/index.tsx
similarity index 86%
rename from src/json-crdt-peritext-ui/renderers/debug/index.tsx
rename to src/json-crdt-peritext-ui/plugins/debug/index.tsx
index 7fc232b485..69308820ee 100644
--- a/src/json-crdt-peritext-ui/renderers/debug/index.tsx
+++ b/src/json-crdt-peritext-ui/plugins/debug/index.tsx
@@ -2,9 +2,9 @@ import * as React from 'react';
 import {RenderInline} from './RenderInline';
 import {RenderBlock} from './RenderBlock';
 import {RenderPeritext, type RenderPeritextProps} from './RenderPeritext';
-import type {RendererMap} from '../../react/types';
+import type {PeritextPlugin} from '../../react/types';
 
-export const renderers = (options?: Pick<RenderPeritextProps, 'enabled'>): RendererMap => ({
+export const renderers = (options?: Pick<RenderPeritextProps, 'enabled'>): PeritextPlugin => ({
   inline: (props, children) => <RenderInline {...props}>{children}</RenderInline>,
   block: (props, children) => <RenderBlock {...props}>{children}</RenderBlock>,
   peritext: (props, children, ctx) => (
diff --git a/src/json-crdt-peritext-ui/renderers/default/Button/index.tsx b/src/json-crdt-peritext-ui/plugins/minimal/Button/index.tsx
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/default/Button/index.tsx
rename to src/json-crdt-peritext-ui/plugins/minimal/Button/index.tsx
diff --git a/src/json-crdt-peritext-ui/renderers/default/Chrome/index.tsx b/src/json-crdt-peritext-ui/plugins/minimal/Chrome/index.tsx
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/default/Chrome/index.tsx
rename to src/json-crdt-peritext-ui/plugins/minimal/Chrome/index.tsx
diff --git a/src/json-crdt-peritext-ui/renderers/default/RenderAnchor.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderAnchor.tsx
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/default/RenderAnchor.tsx
rename to src/json-crdt-peritext-ui/plugins/minimal/RenderAnchor.tsx
diff --git a/src/json-crdt-peritext-ui/renderers/default/RenderCaret.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderCaret.tsx
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/default/RenderCaret.tsx
rename to src/json-crdt-peritext-ui/plugins/minimal/RenderCaret.tsx
diff --git a/src/json-crdt-peritext-ui/renderers/default/RenderFocus.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderFocus.tsx
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/default/RenderFocus.tsx
rename to src/json-crdt-peritext-ui/plugins/minimal/RenderFocus.tsx
diff --git a/src/json-crdt-peritext-ui/renderers/default/RenderInline.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderInline.tsx
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/default/RenderInline.tsx
rename to src/json-crdt-peritext-ui/plugins/minimal/RenderInline.tsx
diff --git a/src/json-crdt-peritext-ui/renderers/default/RenderPeritext.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderPeritext.tsx
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/default/RenderPeritext.tsx
rename to src/json-crdt-peritext-ui/plugins/minimal/RenderPeritext.tsx
diff --git a/src/json-crdt-peritext-ui/renderers/default/TopToolbar/index.tsx b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/default/TopToolbar/index.tsx
rename to src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
diff --git a/src/json-crdt-peritext-ui/renderers/default/constants.ts b/src/json-crdt-peritext-ui/plugins/minimal/constants.ts
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/default/constants.ts
rename to src/json-crdt-peritext-ui/plugins/minimal/constants.ts
diff --git a/src/json-crdt-peritext-ui/renderers/default/context.ts b/src/json-crdt-peritext-ui/plugins/minimal/context.ts
similarity index 100%
rename from src/json-crdt-peritext-ui/renderers/default/context.ts
rename to src/json-crdt-peritext-ui/plugins/minimal/context.ts
diff --git a/src/json-crdt-peritext-ui/renderers/default/index.ts b/src/json-crdt-peritext-ui/plugins/minimal/index.ts
similarity index 93%
rename from src/json-crdt-peritext-ui/renderers/default/index.ts
rename to src/json-crdt-peritext-ui/plugins/minimal/index.ts
index 35edd63bea..b3299dfddc 100644
--- a/src/json-crdt-peritext-ui/renderers/default/index.ts
+++ b/src/json-crdt-peritext-ui/plugins/minimal/index.ts
@@ -5,11 +5,11 @@ import {RenderAnchor} from './RenderAnchor';
 import {RenderInline} from './RenderInline';
 import {RenderPeritext} from './RenderPeritext';
 import {CommonSliceType} from '../../../json-crdt-extensions';
-import type {RendererMap} from '../../react/types';
+import type {PeritextPlugin} from '../../react/types';
 
 const h = React.createElement;
 
-export const renderers: RendererMap = {
+export const renderers: PeritextPlugin = {
   text: (props, inline) => {
     const style = (props.style || (props.style = {})) as React.CSSProperties;
     const attr = inline.attr();
diff --git a/src/json-crdt-peritext-ui/react/PeritextView.tsx b/src/json-crdt-peritext-ui/react/PeritextView.tsx
index 6e90880493..bf71d407f0 100644
--- a/src/json-crdt-peritext-ui/react/PeritextView.tsx
+++ b/src/json-crdt-peritext-ui/react/PeritextView.tsx
@@ -4,9 +4,9 @@ import {context, type PeritextSurfaceContextValue} from './context';
 import {CssClass} from '../constants';
 import {BlockView} from './BlockView';
 import {DomController} from '../dom/DomController';
-import {renderers as defaultRenderers} from '../renderers/default';
+import {renderers as defaultRenderers} from '../plugins/minimal';
 import type {Peritext} from '../../json-crdt-extensions/peritext/Peritext';
-import type {RendererMap} from './types';
+import type {PeritextPlugin} from './types';
 
 put('.' + CssClass.Editor, {
   out: 0,
@@ -29,7 +29,7 @@ put('.' + CssClass.Editor, {
  */
 export interface PeritextViewProps {
   peritext: Peritext;
-  renderers?: RendererMap[];
+  renderers?: PeritextPlugin[];
   onRender?: () => void;
 }
 
diff --git a/src/json-crdt-peritext-ui/react/context.ts b/src/json-crdt-peritext-ui/react/context.ts
index dfff404c26..e3569c47e8 100644
--- a/src/json-crdt-peritext-ui/react/context.ts
+++ b/src/json-crdt-peritext-ui/react/context.ts
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import type {RendererMap} from './types';
+import type {PeritextPlugin} from './types';
 import type {Peritext} from '../../json-crdt-extensions/peritext/Peritext';
 import type {DomController} from '../dom/DomController';
 
 export interface PeritextSurfaceContextValue {
   peritext: Peritext;
-  renderers: RendererMap[];
+  renderers: PeritextPlugin[];
   dom: DomController;
   rerender: () => void;
 }
diff --git a/src/json-crdt-peritext-ui/react/types.ts b/src/json-crdt-peritext-ui/react/types.ts
index c0fc283bb5..b0ef43c1b2 100644
--- a/src/json-crdt-peritext-ui/react/types.ts
+++ b/src/json-crdt-peritext-ui/react/types.ts
@@ -8,7 +8,7 @@ import type {PeritextViewProps} from './PeritextView';
 import type {PeritextSurfaceContextValue} from './context';
 import type {Inline} from '../../json-crdt-extensions/peritext/block/Inline';
 
-export interface RendererMap {
+export interface PeritextPlugin {
   focus?: (props: FocusViewProps, children: React.ReactNode) => React.ReactNode;
   caret?: (props: CaretViewProps, children: React.ReactNode) => React.ReactNode;
   anchor?: (props: AnchorViewProps, children: React.ReactNode) => React.ReactNode;

From 71859ec7220dc938352603e5d6813c7649222e7a Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Fri, 8 Nov 2024 19:13:15 +0100
Subject: [PATCH 02/22] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20move=20TypedEv?=
 =?UTF-8?q?entTarget=20to=20utils=20module?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/json-crdt-peritext-ui/dom/InputController.ts               | 2 +-
 src/json-crdt-peritext-ui/events/PeritextEventTarget.ts        | 2 +-
 src/{json-crdt-peritext-ui => util}/events/TypedEventTarget.ts | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/{json-crdt-peritext-ui => util}/events/TypedEventTarget.ts (100%)

diff --git a/src/json-crdt-peritext-ui/dom/InputController.ts b/src/json-crdt-peritext-ui/dom/InputController.ts
index 1947d5aa4b..2ce3177fa1 100644
--- a/src/json-crdt-peritext-ui/dom/InputController.ts
+++ b/src/json-crdt-peritext-ui/dom/InputController.ts
@@ -1,7 +1,7 @@
 import {unit} from './util';
 import type {Peritext} from '../../json-crdt-extensions/peritext';
 import type {PeritextEventTarget} from '../events/PeritextEventTarget';
-import type {TypedEventTarget} from '../events/TypedEventTarget';
+import type {TypedEventTarget} from '../../util/events/TypedEventTarget';
 import type {CompositionController} from './CompositionController';
 import type {UiLifeCycles} from './types';
 
diff --git a/src/json-crdt-peritext-ui/events/PeritextEventTarget.ts b/src/json-crdt-peritext-ui/events/PeritextEventTarget.ts
index 0df4a0628e..d0a40ae817 100644
--- a/src/json-crdt-peritext-ui/events/PeritextEventTarget.ts
+++ b/src/json-crdt-peritext-ui/events/PeritextEventTarget.ts
@@ -1,4 +1,4 @@
-import {TypedEventTarget} from './TypedEventTarget';
+import {TypedEventTarget} from '../../util/events/TypedEventTarget';
 import type {PeritextEventMap, CursorDetail, InlineDetail, DeleteDetail} from './types';
 
 export type PeritextEventHandlerMap = {
diff --git a/src/json-crdt-peritext-ui/events/TypedEventTarget.ts b/src/util/events/TypedEventTarget.ts
similarity index 100%
rename from src/json-crdt-peritext-ui/events/TypedEventTarget.ts
rename to src/util/events/TypedEventTarget.ts

From 08823fc3459073d55b0a65f4f94da64a033a8926 Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Fri, 8 Nov 2024 20:01:35 +0100
Subject: [PATCH 03/22] =?UTF-8?q?feat(json-crdt-peritext-ui):=20?=
 =?UTF-8?q?=F0=9F=8E=B8=20improve=20boolean=20slice=20insertion=20method?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../peritext/editor/Editor.ts                 | 35 +++++++++++++++++++
 .../events/PeritextEventDefaults.ts           | 24 +++++--------
 2 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/json-crdt-extensions/peritext/editor/Editor.ts b/src/json-crdt-extensions/peritext/editor/Editor.ts
index 3d699c4513..47c51111c9 100644
--- a/src/json-crdt-extensions/peritext/editor/Editor.ts
+++ b/src/json-crdt-extensions/peritext/editor/Editor.ts
@@ -6,12 +6,31 @@ import {isLetter, isPunctuation, isWhitespace} from './util';
 import {Anchor} from '../rga/constants';
 import {MarkerOverlayPoint} from '../overlay/MarkerOverlayPoint';
 import {UndefEndIter, type UndefIterator} from '../../../util/iterator';
+import type {SliceType} from '../slice';
 import type {ChunkSlice} from '../util/ChunkSlice';
 import type {Peritext} from '../Peritext';
 import type {Point} from '../rga/Point';
 import type {Range} from '../rga/Range';
 import type {CharIterator, CharPredicate, Position, TextRangeUnit} from './types';
 
+/**
+   * For inline boolean ("Overwrite") slices, both range endpoints should be
+   * attached to {@link Anchor.Before} as per the Peritext paper. This way, say
+   * bold text, automatically extends to include the next character typed as
+   * user types.
+   *
+   * @param range The range to be adjusted.
+   */
+const makeRangeExtendable = <T>(range: Range<T>): void => {
+  if (range.end.anchor !== Anchor.Before || range.start.anchor !== Anchor.Before) {
+    const start = range.start.clone();
+    const end = range.end.clone();
+    start.refBefore();
+    end.refBefore();
+    range.set(start, end);
+  }
+};
+
 export class Editor<T = string> {
   public readonly saved: EditorSlices<T>;
   public readonly extra: EditorSlices<T>;
@@ -461,6 +480,22 @@ export class Editor<T = string> {
     if (unit) this.select(unit);
   }
 
+  // --------------------------------------------------------------- formatting
+  
+  public formatExclusive(type: SliceType, data?: unknown, slices: EditorSlices<T> = this.saved): void {
+    // TODO: handle mutually exclusive slices (<sub>, <sub>)
+    const overlay = this.txt.overlay;
+    overlay.refresh(); // TODO: Refresh for `overlay.stat()` calls. Is it actually needed?
+    for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
+      const [complete] = overlay.stat(cursor, 1e6);
+      const alreadyFormatted = complete.has(type);
+      if (alreadyFormatted) continue;
+      makeRangeExtendable(cursor);
+      if (cursor.start.isAbs() || cursor.end.isAbs()) continue;
+      slices.insOverwrite(type, data);
+    }
+  }
+
   // ------------------------------------------------------------------ various
 
   public point(at: Position<T>): Point<T> {
diff --git a/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts b/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
index 01ff7d6b95..eae3fdf41a 100644
--- a/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
+++ b/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
@@ -104,26 +104,18 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
     const editor = this.txt.editor;
     const slices: EditorSlices = store === 'saved' ? editor.saved : store === 'extra' ? editor.extra : editor.local;
     switch (behavior) {
-      case 'stack':
+      case 'stack': {
         slices.insStack(type, data);
         break;
-      case 'erase':
+      }
+      case 'overwrite': {
+        editor.formatExclusive(type, data, slices);
+        break;
+      }
+      case 'erase': {
         slices.insErase(type, data);
         break;
-      default:
-        for (let i = editor.cursors0(), cursor = i(); cursor; cursor = i()) {
-          // For inline boolean slices, ref endpoint "before" the next character
-          // as per the Peritext paper, so that, say, bold text automatically
-          // includes the next character typed.
-          if (cursor.end.anchor !== Anchor.Before || cursor.start.anchor !== Anchor.Before) {
-            const start = cursor.start.clone();
-            const end = cursor.end.clone();
-            start.refBefore();
-            end.refBefore();
-            cursor.set(start, end);
-          }
-        }
-        slices.insOverwrite(type, data);
+      }
     }
   };
 

From 453e0e8d7554ad364795f2df82fe77898753b7fb Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Sat, 9 Nov 2024 16:34:00 +0100
Subject: [PATCH 04/22] =?UTF-8?q?feat(json-crdt-peritext-ui):=20?=
 =?UTF-8?q?=F0=9F=8E=B8=20improve=20inline=20"format"=20event?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dom/RichTextController.ts                 |  8 +--
 .../events/PeritextEventDefaults.ts           |  7 +--
 .../events/PeritextEventTarget.ts             | 20 +++----
 .../events/__tests__/inline.spec.ts           |  2 +-
 src/json-crdt-peritext-ui/events/types.ts     | 55 +++++++++++++++++--
 .../plugins/minimal/TopToolbar/index.tsx      |  2 +-
 6 files changed, 69 insertions(+), 25 deletions(-)

diff --git a/src/json-crdt-peritext-ui/dom/RichTextController.ts b/src/json-crdt-peritext-ui/dom/RichTextController.ts
index 514ac29fb1..b805ebd6f8 100644
--- a/src/json-crdt-peritext-ui/dom/RichTextController.ts
+++ b/src/json-crdt-peritext-ui/dom/RichTextController.ts
@@ -31,15 +31,15 @@ export class RichTextController implements UiLifeCycles {
       switch (key) {
         case 'b':
           event.preventDefault();
-          et.inline(CommonSliceType.b);
+          et.format(CommonSliceType.b);
           return;
         case 'i':
           event.preventDefault();
-          et.inline(CommonSliceType.i);
+          et.format(CommonSliceType.i);
           return;
         case 'u':
           event.preventDefault();
-          et.inline(CommonSliceType.u);
+          et.format(CommonSliceType.u);
           return;
       }
     }
@@ -47,7 +47,7 @@ export class RichTextController implements UiLifeCycles {
       switch (key) {
         case 'x':
           event.preventDefault();
-          et.inline(CommonSliceType.s);
+          et.format(CommonSliceType.s);
           return;
       }
     }
diff --git a/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts b/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
index eae3fdf41a..95c012f165 100644
--- a/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
+++ b/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
@@ -1,6 +1,5 @@
 import type {Peritext} from '../../json-crdt-extensions/peritext';
 import type {EditorSlices} from '../../json-crdt-extensions/peritext/editor/EditorSlices';
-import {Anchor} from '../../json-crdt-extensions/peritext/rga/constants';
 import {CursorAnchor} from '../../json-crdt-extensions/peritext/slice/constants';
 import type {PeritextEventHandlerMap, PeritextEventTarget} from './PeritextEventTarget';
 import type * as events from './types';
@@ -99,16 +98,16 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
     }
   };
 
-  public readonly inline = (event: CustomEvent<events.InlineDetail>) => {
+  public readonly format = (event: CustomEvent<events.FormatDetail>) => {
     const {type, store = 'saved', behavior = 'overwrite', data} = event.detail;
     const editor = this.txt.editor;
     const slices: EditorSlices = store === 'saved' ? editor.saved : store === 'extra' ? editor.extra : editor.local;
     switch (behavior) {
-      case 'stack': {
+      case 'many': {
         slices.insStack(type, data);
         break;
       }
-      case 'overwrite': {
+      case 'one': {
         editor.formatExclusive(type, data, slices);
         break;
       }
diff --git a/src/json-crdt-peritext-ui/events/PeritextEventTarget.ts b/src/json-crdt-peritext-ui/events/PeritextEventTarget.ts
index d0a40ae817..4b172502c6 100644
--- a/src/json-crdt-peritext-ui/events/PeritextEventTarget.ts
+++ b/src/json-crdt-peritext-ui/events/PeritextEventTarget.ts
@@ -1,5 +1,5 @@
 import {TypedEventTarget} from '../../util/events/TypedEventTarget';
-import type {PeritextEventMap, CursorDetail, InlineDetail, DeleteDetail} from './types';
+import type {PeritextEventMap, CursorDetail, FormatDetail, DeleteDetail} from './types';
 
 export type PeritextEventHandlerMap = {
   [K in keyof PeritextEventMap]: (event: CustomEvent<PeritextEventMap[K]>) => void;
@@ -51,15 +51,15 @@ export class PeritextEventTarget extends TypedEventTarget<PeritextEventMap> {
     this.cursor({len, unit, edge});
   }
 
-  public inline(type: InlineDetail['type'], behavior?: InlineDetail['behavior'], data?: InlineDetail['data']): void;
-  public inline(detail: InlineDetail): void;
-  public inline(
-    a: InlineDetail | InlineDetail['type'],
-    behavior?: InlineDetail['behavior'],
-    data?: InlineDetail['data'],
+  public format(type: FormatDetail['type'], behavior?: FormatDetail['behavior'], data?: FormatDetail['data']): void;
+  public format(detail: FormatDetail): void;
+  public format(
+    a: FormatDetail | FormatDetail['type'],
+    behavior?: FormatDetail['behavior'],
+    data?: FormatDetail['data'],
   ): void {
-    const detail: InlineDetail =
-      typeof a === 'object' && !Array.isArray(a) ? (a as InlineDetail) : ({type: a, behavior, data} as InlineDetail);
-    this.dispatch('inline', detail);
+    const detail: FormatDetail =
+      typeof a === 'object' && !Array.isArray(a) ? (a as FormatDetail) : ({type: a, behavior, data} as FormatDetail);
+    this.dispatch('format', detail);
   }
 }
diff --git a/src/json-crdt-peritext-ui/events/__tests__/inline.spec.ts b/src/json-crdt-peritext-ui/events/__tests__/inline.spec.ts
index 7cba41189b..b569f4b076 100644
--- a/src/json-crdt-peritext-ui/events/__tests__/inline.spec.ts
+++ b/src/json-crdt-peritext-ui/events/__tests__/inline.spec.ts
@@ -14,7 +14,7 @@ const testSuite = (getKit: () => Kit) => {
   test('can add annotation to the current selection', async () => {
     const kit = setup();
     kit.et.cursor({at: 3, len: 3});
-    kit.et.inline({type: 'bold'});
+    kit.et.format({type: 'bold'});
     kit.peritext.refresh();
     const slices = kit.peritext.overlay.findOverlapping(kit.peritext.rangeAt(5));
     console.log([...slices]);
diff --git a/src/json-crdt-peritext-ui/events/types.ts b/src/json-crdt-peritext-ui/events/types.ts
index 34a44a29ff..316f85e149 100644
--- a/src/json-crdt-peritext-ui/events/types.ts
+++ b/src/json-crdt-peritext-ui/events/types.ts
@@ -6,7 +6,7 @@ import type {SliceType} from '../../json-crdt-extensions/peritext/slice/types';
  * Dispatched every time any other event is dispatched.
  */
 export interface ChangeDetail {
-  ev?: CustomEvent<InsertDetail | DeleteDetail | CursorDetail | InlineDetail | MarkerDetail>;
+  ev?: CustomEvent<InsertDetail | DeleteDetail | CursorDetail | FormatDetail | MarkerDetail>;
 }
 
 /**
@@ -174,11 +174,56 @@ export interface CursorDetail {
 /**
  * Event dispatched to insert an inline rich-text annotation into the document.
  */
-export interface InlineDetail {
-  type: SliceType;
+export interface FormatDetail {
+  /**
+   * Type of the annotation. The type is used to determine the visual style of
+   * the annotation, for example, the type `'bold'` may render the text in bold.
+   * 
+   * For common formatting use the {@link CommonSliceType} enum. It contains
+   * a unique numeric value for each common formatting types. Numeric values
+   * are best for performance and memory usage. Values in the rage -64 to 64 are
+   * reserved for common formatting types.
+   * 
+   * For custom formatting, you can use a string value, for example,
+   * `'highlight'`. Or use an integer with absolute value greater than 64.
+   * 
+   * Inline formatting types are restricted to a single string or integer value.
+   * Nester formatting, say `['p', 'blockquote', 'h1']` is reserved for block
+   * formatting, in which case a nested structure like
+   * `<p><blockquote><h1>text</h1></blockquote></p>` is created.
+   */
+  type: number | string;
+
+  /**
+   * Arbitrary data associated with the formatting. Usually, stored with
+   * annotations of "stack" behavior, for example, an "<a>" tag annotation may
+   * store the href attribute in this field.
+   */
   data?: unknown;
-  behavior?: 'stack' | 'overwrite' | 'erase';
+
+  /**
+   * Specifies the behavior of the annotation. If `'many'`, the annotation of
+   * this type will be stacked on top of each other, and all of them will be
+   * applied to the text, with the last annotation on top. If `'one'`,
+   * the annotation is not stacked, only one such annotation can be applied per
+   * character. The `'erase'` behavior is used to remove the `'many`' or
+   * `'one'` annotation from the the given range.
+   */
+  behavior?: 'many' | 'one' | 'erase';
+
+  /**
+   * The slice set where the annotation will be stored. `'saved'` is the main
+   * document, which is persisted and replicated across all clients. `'extra'`
+   * is an ephemeral document, which is not persisted but can be replicated
+   * across clients. `'local'` is a local document, which is accessible only to
+   * the local client, for example, for storing cursor or selection information.
+   */
   store?: 'saved' | 'extra' | 'local';
+
+  /**
+   * Specifies the range of the annotation. If not specified, the annotation
+   * is applied to all cursors in the document at their current positions.
+   */
   pos?: [start: Position, end: Position][];
 }
 
@@ -205,6 +250,6 @@ export type PeritextEventMap = {
   insert: InsertDetail;
   delete: DeleteDetail;
   cursor: CursorDetail;
-  inline: InlineDetail;
+  format: FormatDetail;
   marker: MarkerDetail;
 };
diff --git a/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
index 845e06bc43..68bb8aa00c 100644
--- a/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
@@ -30,7 +30,7 @@ export const TopToolbar: React.FC<TopToolbarProps> = () => {
 
   const button = (type: string | number, name: React.ReactNode) => (
     <Button
-      onClick={() => ctx.dom.et.inline({type})}
+      onClick={() => ctx.dom.et.format({type})}
       onMouseDown={(e) => e.preventDefault()}
       active={complete.has(type)}
     >

From 575fb526686e68ef12cfd87f76ec60a3680873d6 Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Sat, 9 Nov 2024 16:38:43 +0100
Subject: [PATCH 05/22] =?UTF-8?q?feat(json-crdt-peritext-ui):=20?=
 =?UTF-8?q?=F0=9F=8E=B8=20fixup=20default=20format=20event=20usage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts | 2 +-
 src/json-crdt-peritext-ui/events/types.ts                 | 8 +++++++-
 .../plugins/minimal/TopToolbar/index.tsx                  | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts b/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
index 95c012f165..57c350305f 100644
--- a/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
+++ b/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
@@ -99,7 +99,7 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
   };
 
   public readonly format = (event: CustomEvent<events.FormatDetail>) => {
-    const {type, store = 'saved', behavior = 'overwrite', data} = event.detail;
+    const {type, store = 'saved', behavior = 'one', data} = event.detail;
     const editor = this.txt.editor;
     const slices: EditorSlices = store === 'saved' ? editor.saved : store === 'extra' ? editor.extra : editor.local;
     switch (behavior) {
diff --git a/src/json-crdt-peritext-ui/events/types.ts b/src/json-crdt-peritext-ui/events/types.ts
index 316f85e149..775491e99f 100644
--- a/src/json-crdt-peritext-ui/events/types.ts
+++ b/src/json-crdt-peritext-ui/events/types.ts
@@ -198,6 +198,8 @@ export interface FormatDetail {
    * Arbitrary data associated with the formatting. Usually, stored with
    * annotations of "stack" behavior, for example, an "<a>" tag annotation may
    * store the href attribute in this field.
+   * 
+   * @default undefined
    */
   data?: unknown;
 
@@ -208,8 +210,10 @@ export interface FormatDetail {
    * the annotation is not stacked, only one such annotation can be applied per
    * character. The `'erase'` behavior is used to remove the `'many`' or
    * `'one'` annotation from the the given range.
+   * 
+   * @default 'one'
    */
-  behavior?: 'many' | 'one' | 'erase';
+  behavior?: 'one' | 'many' | 'erase';
 
   /**
    * The slice set where the annotation will be stored. `'saved'` is the main
@@ -217,6 +221,8 @@ export interface FormatDetail {
    * is an ephemeral document, which is not persisted but can be replicated
    * across clients. `'local'` is a local document, which is accessible only to
    * the local client, for example, for storing cursor or selection information.
+   * 
+   * @default 'saved'
    */
   store?: 'saved' | 'extra' | 'local';
 
diff --git a/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
index 68bb8aa00c..ad8f4b1225 100644
--- a/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
@@ -30,7 +30,7 @@ export const TopToolbar: React.FC<TopToolbarProps> = () => {
 
   const button = (type: string | number, name: React.ReactNode) => (
     <Button
-      onClick={() => ctx.dom.et.format({type})}
+      onClick={() => ctx.dom.et.format(type)}
       onMouseDown={(e) => e.preventDefault()}
       active={complete.has(type)}
     >

From 2ef63201f833aadd2a27066858ccbc28d4bf95fa Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Sat, 9 Nov 2024 17:18:00 +0100
Subject: [PATCH 06/22] =?UTF-8?q?feat(json-crdt-extensions):=20?=
 =?UTF-8?q?=F0=9F=8E=B8=20add=20ability=20to=20toggle=20inline=20boolean?=
 =?UTF-8?q?=20formatting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../peritext/editor/Editor.ts                 | 23 ++++++++++++++-----
 .../events/PeritextEventDefaults.ts           |  2 +-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/json-crdt-extensions/peritext/editor/Editor.ts b/src/json-crdt-extensions/peritext/editor/Editor.ts
index 47c51111c9..de3a66e0be 100644
--- a/src/json-crdt-extensions/peritext/editor/Editor.ts
+++ b/src/json-crdt-extensions/peritext/editor/Editor.ts
@@ -482,17 +482,28 @@ export class Editor<T = string> {
 
   // --------------------------------------------------------------- formatting
   
-  public formatExclusive(type: SliceType, data?: unknown, slices: EditorSlices<T> = this.saved): void {
+  public toggleFormatting(type: SliceType, data?: unknown, slices: EditorSlices<T> = this.saved): void {
     // TODO: handle mutually exclusive slices (<sub>, <sub>)
     const overlay = this.txt.overlay;
     overlay.refresh(); // TODO: Refresh for `overlay.stat()` calls. Is it actually needed?
     for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
       const [complete] = overlay.stat(cursor, 1e6);
-      const alreadyFormatted = complete.has(type);
-      if (alreadyFormatted) continue;
-      makeRangeExtendable(cursor);
-      if (cursor.start.isAbs() || cursor.end.isAbs()) continue;
-      slices.insOverwrite(type, data);
+      const needToRemoveFormatting = complete.has(type);
+      if (needToRemoveFormatting) {
+        const contained = overlay.findContained(cursor);
+        for (const slice of contained)
+          if (slice.behavior === SliceBehavior.Overwrite && slice.type === type)
+            slices.del(slice.id);
+        overlay.refresh();
+        const [complete2, partial2] = overlay.stat(cursor, 1e6);
+        const needsErase = complete2.has(type) || partial2.has(type);
+        if (needsErase) slices.insErase(type);
+        continue;
+      } else {
+        makeRangeExtendable(cursor);
+        if (cursor.start.isAbs() || cursor.end.isAbs()) continue;
+        slices.insOverwrite(type, data);
+      }
     }
   }
 
diff --git a/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts b/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
index 57c350305f..76bcd354dd 100644
--- a/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
+++ b/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
@@ -108,7 +108,7 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
         break;
       }
       case 'one': {
-        editor.formatExclusive(type, data, slices);
+        editor.toggleFormatting(type, data, slices);
         break;
       }
       case 'erase': {

From 5da6d1cd76d6fa4be20e34c2a83cc7aa991e3f3f Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Sat, 9 Nov 2024 18:07:24 +0100
Subject: [PATCH 07/22] =?UTF-8?q?feat(json-crdt-extensions):=20?=
 =?UTF-8?q?=F0=9F=8E=B8=20rename=20SliceBehavior=20members=20and=20add=20J?=
 =?UTF-8?q?SDOcs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../peritext/block/Inline.ts                  |  4 +-
 .../peritext/editor/Editor.ts                 |  2 +-
 .../peritext/overlay/Overlay.ts               |  2 +-
 .../peritext/slice/Slices.ts                  |  4 +-
 .../peritext/slice/__tests__/Slices.spec.ts   | 10 ++--
 .../peritext/slice/constants.ts               | 46 +++++++++++++------
 .../quill-delta/QuillDeltaApi.ts              |  2 +-
 src/json-crdt-extensions/quill-delta/util.ts  |  2 +-
 8 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/src/json-crdt-extensions/peritext/block/Inline.ts b/src/json-crdt-extensions/peritext/block/Inline.ts
index 70bdc0dec7..5b9b8c96d9 100644
--- a/src/json-crdt-extensions/peritext/block/Inline.ts
+++ b/src/json-crdt-extensions/peritext/block/Inline.ts
@@ -160,12 +160,12 @@ export class Inline extends Range implements Printable {
             stack.push(this.createAttr(slice));
             break;
           }
-          case SliceBehavior.Stack: {
+          case SliceBehavior.Many: {
             const stack: InlineAttrStack = attr[type] ?? (attr[type] = []);
             stack.push(this.createAttr(slice));
             break;
           }
-          case SliceBehavior.Overwrite: {
+          case SliceBehavior.One: {
             attr[type] = [this.createAttr(slice)];
             break;
           }
diff --git a/src/json-crdt-extensions/peritext/editor/Editor.ts b/src/json-crdt-extensions/peritext/editor/Editor.ts
index de3a66e0be..c6c9defb33 100644
--- a/src/json-crdt-extensions/peritext/editor/Editor.ts
+++ b/src/json-crdt-extensions/peritext/editor/Editor.ts
@@ -492,7 +492,7 @@ export class Editor<T = string> {
       if (needToRemoveFormatting) {
         const contained = overlay.findContained(cursor);
         for (const slice of contained)
-          if (slice.behavior === SliceBehavior.Overwrite && slice.type === type)
+          if (slice.behavior === SliceBehavior.One && slice.type === type)
             slices.del(slice.id);
         overlay.refresh();
         const [complete2, partial2] = overlay.stat(cursor, 1e6);
diff --git a/src/json-crdt-extensions/peritext/overlay/Overlay.ts b/src/json-crdt-extensions/peritext/overlay/Overlay.ts
index 7464d062b0..aa988f058d 100644
--- a/src/json-crdt-extensions/peritext/overlay/Overlay.ts
+++ b/src/json-crdt-extensions/peritext/overlay/Overlay.ts
@@ -355,7 +355,7 @@ export class Overlay<T = string> implements Printable, Stateful {
         if (typeof type === 'object') continue LAYERS;
         const behavior = slice.behavior;
         BEHAVIOR: switch (behavior) {
-          case SliceBehavior.Overwrite:
+          case SliceBehavior.One:
             current.add(type);
             break BEHAVIOR;
           case SliceBehavior.Erase:
diff --git a/src/json-crdt-extensions/peritext/slice/Slices.ts b/src/json-crdt-extensions/peritext/slice/Slices.ts
index 9a94169987..ae6623262f 100644
--- a/src/json-crdt-extensions/peritext/slice/Slices.ts
+++ b/src/json-crdt-extensions/peritext/slice/Slices.ts
@@ -107,11 +107,11 @@ export class Slices<T = string> implements Stateful, Printable {
   }
 
   public insStack(range: Range<T>, type: SliceType, data?: unknown | ITimestampStruct): PersistedSlice<T> {
-    return this.ins(range, SliceBehavior.Stack, type, data);
+    return this.ins(range, SliceBehavior.Many, type, data);
   }
 
   public insOverwrite(range: Range<T>, type: SliceType, data?: unknown | ITimestampStruct): PersistedSlice<T> {
-    return this.ins(range, SliceBehavior.Overwrite, type, data);
+    return this.ins(range, SliceBehavior.One, type, data);
   }
 
   public insErase(range: Range<T>, type: SliceType, data?: unknown | ITimestampStruct): PersistedSlice<T> {
diff --git a/src/json-crdt-extensions/peritext/slice/__tests__/Slices.spec.ts b/src/json-crdt-extensions/peritext/slice/__tests__/Slices.spec.ts
index 96cd84e769..50ee4c4df8 100644
--- a/src/json-crdt-extensions/peritext/slice/__tests__/Slices.spec.ts
+++ b/src/json-crdt-extensions/peritext/slice/__tests__/Slices.spec.ts
@@ -17,11 +17,11 @@ describe('.ins()', () => {
   test('can insert a slice', () => {
     const {peritext, slices} = setup();
     const range = peritext.rangeAt(12, 7);
-    const slice = slices.ins(range, SliceBehavior.Stack, 'b', {bold: true});
+    const slice = slices.ins(range, SliceBehavior.Many, 'b', {bold: true});
     expect(peritext.savedSlices.size()).toBe(1);
     expect(slice.start).toStrictEqual(range.start);
     expect(slice.end).toStrictEqual(range.end);
-    expect(slice.behavior).toBe(SliceBehavior.Stack);
+    expect(slice.behavior).toBe(SliceBehavior.Many);
     expect(slice.type).toBe('b');
     expect(slice.data()).toStrictEqual({bold: true});
   });
@@ -80,7 +80,7 @@ describe('.ins()', () => {
     const ranges = [r1, r2, r3, r4];
     const types = ['b', ['li', 'ul'], 0, 123, [1, 2, 3]];
     const datas = [{bold: true}, {list: 'ul'}, 0, 123, [1, 2, 3], null, undefined];
-    const behaviors = [SliceBehavior.Stack, SliceBehavior.Erase, SliceBehavior.Overwrite, SliceBehavior.Marker];
+    const behaviors = [SliceBehavior.Many, SliceBehavior.Erase, SliceBehavior.One, SliceBehavior.Marker];
     for (const range of ranges) {
       for (const type of types) {
         for (const data of datas) {
@@ -176,8 +176,8 @@ describe('.refresh()', () => {
   };
 
   testSliceUpdate('slice behavior change', ({slice}) => {
-    slice.update({behavior: SliceBehavior.Stack});
-    expect(slice.behavior).toBe(SliceBehavior.Stack);
+    slice.update({behavior: SliceBehavior.Many});
+    expect(slice.behavior).toBe(SliceBehavior.Many);
   });
 
   testSliceUpdate('slice type change', ({slice}) => {
diff --git a/src/json-crdt-extensions/peritext/slice/constants.ts b/src/json-crdt-extensions/peritext/slice/constants.ts
index 4fd36bf551..2a881a8033 100644
--- a/src/json-crdt-extensions/peritext/slice/constants.ts
+++ b/src/json-crdt-extensions/peritext/slice/constants.ts
@@ -13,7 +13,7 @@ export enum CursorAnchor {
  * Built-in slice types.
  */
 export enum CommonSliceType {
-  // Block slices
+  // ---------------------------------------------------- block slices (0 to 64)
   p = 0, // <p>
   blockquote = 1, // <blockquote>
   codeblock = 2, // <pre><code>
@@ -36,7 +36,7 @@ export enum CommonSliceType {
   aside = 19, // <aside>
   embed = 20, // <embed>, <iframe>, <object>, <video>, <audio>, etc.
 
-  // Inline slices
+  // ------------------------------------------------ inline slices (-64 to -1)
   Cursor = -1,
   RemoteCursor = -2,
   b = -3, // <b>
@@ -77,27 +77,43 @@ export enum SliceHeaderShift {
 
 export enum SliceBehavior {
   /**
-   * A Split slice, which is used to mark a block split position in the document.
-   * For example, paragraph, heading, blockquote, etc.
+   * The `Marker` slices are used to mark a block split position in the
+   * document. For example, paragraph, heading, blockquote, etc. It separates
+   * adjacent blocks and is used to determine the block type of the contents
+   * following the marker, until the next marker is encountered.
    */
   Marker = 0b000,
 
   /**
-   * Appends attributes to a stack of attributes for a specific slice type. This
-   * is useful when the same slice type can have multiple attributes, like
-   * inline comments, highlights, etc.
+   * The `Many` slices are inline formatting annotations, which allow one
+   * or more annotations of the same type to apply to the same text. Slices with
+   * behavior `Many` are appended to the stack of attributes for a specific
+   * slice type. With the most recent annotation on top.
+   * 
+   * Slices with behavior `Many` are used for inline formatting, like for links,
+   * comments, etc. Where multiple annotations of the same type can be applied
+   * to the same text.
    */
-  Stack = 0b001,
+  Many = 0b001,
 
   /**
-   * Overwrites the stack of attributes for a specific slice type. Could be used
-   * for simple inline formatting, like bold, italic, etc.
+   * The slices with behavior `One` are used for inline formatting annotations,
+   * they overwrite the stack of attributes for a specific slice type. This type
+   * of slice is used when only one annotation of a specific type can be applied
+   * to the same text. For example, those could be used for simple inline
+   * formatting, like bold, italic, etc.
    */
-  Overwrite = 0b010,
+  One = 0b010,
 
   /**
-   * Removes all attributes for a specific slice type. For example, could be
-   * used to reverse inline formatting, like bold, italic, etc.
+   * The `Erase` slices are used to soft remove all annotations
+   * (`Many` or `One`) of the same type which are applied to the same text
+   * range. The erase slices soft remove only the annotations which were applied
+   * before the erase slice, as determined by the logical clock (there could
+   * be many layers of annotations applied and erased).
+   * 
+   * Usually slices with behavior `Erase` are used to reverse inline exclusive
+   * (`One`) inline formatting, like bold, italic, etc.
    */
   Erase = 0b011,
 
@@ -111,8 +127,8 @@ export enum SliceBehavior {
 
 export enum SliceBehaviorName {
   Marker = SliceBehavior.Marker,
-  Stack = SliceBehavior.Stack,
-  Overwrite = SliceBehavior.Overwrite,
+  Stack = SliceBehavior.Many,
+  Overwrite = SliceBehavior.One,
   Erase = SliceBehavior.Erase,
   Cursor = SliceBehavior.Cursor,
 }
diff --git a/src/json-crdt-extensions/quill-delta/QuillDeltaApi.ts b/src/json-crdt-extensions/quill-delta/QuillDeltaApi.ts
index 07a142f14a..2f54e8524c 100644
--- a/src/json-crdt-extensions/quill-delta/QuillDeltaApi.ts
+++ b/src/json-crdt-extensions/quill-delta/QuillDeltaApi.ts
@@ -29,7 +29,7 @@ const updateAttributes = (txt: Peritext, attributes: QuillDeltaAttributes | unde
     if (value === null) {
       savedSlices.ins(range, SliceBehavior.Erase, key);
     } else {
-      savedSlices.ins(range, SliceBehavior.Overwrite, key, konst(value));
+      savedSlices.ins(range, SliceBehavior.One, key, konst(value));
     }
   }
 };
diff --git a/src/json-crdt-extensions/quill-delta/util.ts b/src/json-crdt-extensions/quill-delta/util.ts
index b9f45d5a43..e1723739a4 100644
--- a/src/json-crdt-extensions/quill-delta/util.ts
+++ b/src/json-crdt-extensions/quill-delta/util.ts
@@ -14,7 +14,7 @@ export const getAttributes = (overlayPoint: OverlayPoint): QuillDeltaAttributes
     const slice = layers[i];
     if (!(slice instanceof PersistedSlice)) continue;
     switch (slice.behavior) {
-      case SliceBehavior.Overwrite: {
+      case SliceBehavior.One: {
         const tag = slice.type as PathStep;
         if (tag) attributes[tag] = slice.data();
         break;

From 08e867e4004c9bc06949ad13f745ab9c79a24773 Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Sat, 9 Nov 2024 18:12:10 +0100
Subject: [PATCH 08/22] =?UTF-8?q?feat(json-crdt-extensions):=20?=
 =?UTF-8?q?=F0=9F=8E=B8=20debug=20print=20slice=20metadata?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/json-crdt-extensions/peritext/slice/PersistedSlice.ts | 2 +-
 src/json-crdt-extensions/peritext/slice/constants.ts      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/json-crdt-extensions/peritext/slice/PersistedSlice.ts b/src/json-crdt-extensions/peritext/slice/PersistedSlice.ts
index 0548e24705..8013c8e0b0 100644
--- a/src/json-crdt-extensions/peritext/slice/PersistedSlice.ts
+++ b/src/json-crdt-extensions/peritext/slice/PersistedSlice.ts
@@ -165,7 +165,7 @@ export class PersistedSlice<T = string> extends Range<T> implements MutableSlice
   // ---------------------------------------------------------------- Printable
 
   public toStringName(): string {
-    return 'Range';
+    return `slice [${SliceBehaviorName[this.behavior]}] ${JSON.stringify(this.type)}`;
   }
 
   protected toStringHeaderName(): string {
diff --git a/src/json-crdt-extensions/peritext/slice/constants.ts b/src/json-crdt-extensions/peritext/slice/constants.ts
index 2a881a8033..0c22eba9b8 100644
--- a/src/json-crdt-extensions/peritext/slice/constants.ts
+++ b/src/json-crdt-extensions/peritext/slice/constants.ts
@@ -127,8 +127,8 @@ export enum SliceBehavior {
 
 export enum SliceBehaviorName {
   Marker = SliceBehavior.Marker,
-  Stack = SliceBehavior.Many,
-  Overwrite = SliceBehavior.One,
+  Many = SliceBehavior.Many,
+  One = SliceBehavior.One,
   Erase = SliceBehavior.Erase,
   Cursor = SliceBehavior.Cursor,
 }

From 8d246b261c6cb1e6d932d878f428d5c02fdc473e Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Sat, 9 Nov 2024 18:20:21 +0100
Subject: [PATCH 09/22] =?UTF-8?q?fix(json-crdt-peritext-ui):=20?=
 =?UTF-8?q?=F0=9F=90=9B=20remove=20all=20slices=20of=20given=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/json-crdt-extensions/peritext/editor/Editor.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/json-crdt-extensions/peritext/editor/Editor.ts b/src/json-crdt-extensions/peritext/editor/Editor.ts
index c6c9defb33..7e0c0b8949 100644
--- a/src/json-crdt-extensions/peritext/editor/Editor.ts
+++ b/src/json-crdt-extensions/peritext/editor/Editor.ts
@@ -492,8 +492,7 @@ export class Editor<T = string> {
       if (needToRemoveFormatting) {
         const contained = overlay.findContained(cursor);
         for (const slice of contained)
-          if (slice.behavior === SliceBehavior.One && slice.type === type)
-            slices.del(slice.id);
+          if (slice.type === type) slices.del(slice.id);
         overlay.refresh();
         const [complete2, partial2] = overlay.stat(cursor, 1e6);
         const needsErase = complete2.has(type) || partial2.has(type);

From 3101fbc586f1dacd89ef2495442bf181a119081e Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Sat, 9 Nov 2024 18:29:24 +0100
Subject: [PATCH 10/22] =?UTF-8?q?feat(json-crdt-extensions):=20?=
 =?UTF-8?q?=F0=9F=8E=B8=20improve=20boolean=20annotation=20handling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/json-crdt-extensions/peritext/editor/Editor.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/json-crdt-extensions/peritext/editor/Editor.ts b/src/json-crdt-extensions/peritext/editor/Editor.ts
index 7e0c0b8949..a99d5b4814 100644
--- a/src/json-crdt-extensions/peritext/editor/Editor.ts
+++ b/src/json-crdt-extensions/peritext/editor/Editor.ts
@@ -489,17 +489,16 @@ export class Editor<T = string> {
     for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
       const [complete] = overlay.stat(cursor, 1e6);
       const needToRemoveFormatting = complete.has(type);
+      makeRangeExtendable(cursor);
+      const contained = overlay.findContained(cursor);
+      for (const slice of contained) if (slice.type === type) slices.del(slice.id);
       if (needToRemoveFormatting) {
-        const contained = overlay.findContained(cursor);
-        for (const slice of contained)
-          if (slice.type === type) slices.del(slice.id);
         overlay.refresh();
         const [complete2, partial2] = overlay.stat(cursor, 1e6);
         const needsErase = complete2.has(type) || partial2.has(type);
         if (needsErase) slices.insErase(type);
         continue;
       } else {
-        makeRangeExtendable(cursor);
         if (cursor.start.isAbs() || cursor.end.isAbs()) continue;
         slices.insOverwrite(type, data);
       }

From 9e5215c8961f06213f594bbba316cd4e937e3c79 Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Sat, 9 Nov 2024 18:30:00 +0100
Subject: [PATCH 11/22] =?UTF-8?q?feat(json-crdt-extensions):=20?=
 =?UTF-8?q?=F0=9F=8E=B8=20print=20well=20known=20slice=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/json-crdt-extensions/peritext/slice/PersistedSlice.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/json-crdt-extensions/peritext/slice/PersistedSlice.ts b/src/json-crdt-extensions/peritext/slice/PersistedSlice.ts
index 8013c8e0b0..a1a7f701d2 100644
--- a/src/json-crdt-extensions/peritext/slice/PersistedSlice.ts
+++ b/src/json-crdt-extensions/peritext/slice/PersistedSlice.ts
@@ -4,7 +4,7 @@ import {Range} from '../rga/Range';
 import {updateNode} from '../../../json-crdt/hash';
 import {printTree} from 'tree-dump/lib/printTree';
 import type {Anchor} from '../rga/constants';
-import {SliceHeaderMask, SliceHeaderShift, SliceBehavior, SliceTupleIndex, SliceBehaviorName} from './constants';
+import {SliceHeaderMask, SliceHeaderShift, SliceBehavior, SliceTupleIndex, SliceBehaviorName, CommonSliceType} from './constants';
 import {CONST} from '../../../json-hash';
 import {Timestamp} from '../../../json-crdt-patch/clock';
 import type {VecNode} from '../../../json-crdt/nodes';
@@ -165,6 +165,9 @@ export class PersistedSlice<T = string> extends Range<T> implements MutableSlice
   // ---------------------------------------------------------------- Printable
 
   public toStringName(): string {
+    if (typeof this.type === 'number' && Math.abs(this.type) <= 64 && CommonSliceType[this.type]) {
+      return `slice [${SliceBehaviorName[this.behavior]}] <${CommonSliceType[this.type]}>`;
+    }
     return `slice [${SliceBehaviorName[this.behavior]}] ${JSON.stringify(this.type)}`;
   }
 

From 9b51f72f174787769ccdbf1db31a506af22f2487 Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Sat, 9 Nov 2024 18:58:06 +0100
Subject: [PATCH 12/22] =?UTF-8?q?feat(json-crdt-peritext-ui):=20?=
 =?UTF-8?q?=F0=9F=8E=B8=20animate=20achor=20appearance?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plugins/minimal/RenderAnchor.tsx             | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/json-crdt-peritext-ui/plugins/minimal/RenderAnchor.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderAnchor.tsx
index de18e5e2d1..88fcd8d919 100644
--- a/src/json-crdt-peritext-ui/plugins/minimal/RenderAnchor.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/RenderAnchor.tsx
@@ -1,12 +1,24 @@
 // biome-ignore lint: React is used for JSX
 import * as React from 'react';
-import {rule} from 'nano-theme';
+import {rule, keyframes} from 'nano-theme';
 import {Char} from '../../constants';
 import {DefaultRendererColors} from './constants';
 import {usePeritext} from '../../react';
 import {useSyncStore} from '../../react/hooks';
 import type {AnchorViewProps} from '../../react/selection/AnchorView';
 
+export const fadeInAnimation = keyframes({
+  from: {
+    tr: 'scale(0)',
+  },
+  '75%': {
+    tr: 'scale(0)',
+  },
+  to: {
+    tr: 'scale(1)',
+  },
+});
+
 const blockClass = rule({
   pos: 'relative',
   d: 'inline-block',
@@ -26,6 +38,8 @@ const innerClass = rule({
   h: 'calc(min(16px,0.5em))',
   bdrad: '50%/30%',
   bg: DefaultRendererColors.ActiveCursor,
+  an: fadeInAnimation + ' .75s ease-out',
+  animationFillMode: 'forwards',
 });
 
 export interface RenderAnchorProps extends AnchorViewProps {}

From b77ddc31ad787827f34882f87f11f0a1061fdb4b Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Sat, 9 Nov 2024 18:58:31 +0100
Subject: [PATCH 13/22] =?UTF-8?q?refactor(json-crdt-peritext-ui):=20?=
 =?UTF-8?q?=F0=9F=92=A1=20move=20main=20code=20of=20cursor/selection=20ren?=
 =?UTF-8?q?dering=20to=20block?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/json-crdt-peritext-ui/react/BlockView.tsx | 52 ++++++++++++++++++-
 .../react/InlineView.tsx                      | 48 +----------------
 2 files changed, 52 insertions(+), 48 deletions(-)

diff --git a/src/json-crdt-peritext-ui/react/BlockView.tsx b/src/json-crdt-peritext-ui/react/BlockView.tsx
index 8fa9e99bec..58b2b84808 100644
--- a/src/json-crdt-peritext-ui/react/BlockView.tsx
+++ b/src/json-crdt-peritext-ui/react/BlockView.tsx
@@ -4,6 +4,11 @@ import type {Block} from '../../json-crdt-extensions/peritext/block/Block';
 import {InlineView} from './InlineView';
 import {Char} from '../constants';
 import {usePeritext} from './context';
+import {CommonSliceType} from '../../json-crdt-extensions';
+import {CaretView} from './selection/CaretView';
+import {FocusView} from './selection/FocusView';
+import {InlineAttrEnd, InlineAttrStart} from '../../json-crdt-extensions/peritext/block/Inline';
+import {AnchorView} from './selection/AnchorView';
 
 export interface BlockViewProps {
   hash: number;
@@ -18,7 +23,52 @@ export const BlockView: React.FC<BlockViewProps> = React.memo(
 
     const elements: React.ReactNode[] = [];
     if (block instanceof LeafBlock) {
-      for (const inline of block.texts()) elements.push(<InlineView key={inline.key()} inline={inline} />);
+      for (const inline of block.texts()) {
+        const hasCursor = inline.hasCursor();
+        if (hasCursor) {
+          console.log('hasCursor');
+          const elements: React.ReactNode[] = [];
+          const attr = inline.attr();
+          const italic = attr[CommonSliceType.i] && attr[CommonSliceType.i][0];
+          const key = inline.key();
+          const cursorStart = inline.cursorStart();
+          if (cursorStart) {
+            console.log('cursorStart.isCollapsed()', cursorStart.isStartFocused(), cursorStart.isCollapsed());
+            const k = 'selection-start';
+            elements.push(
+              cursorStart.isStartFocused() ? (
+                cursorStart.isCollapsed() ? (
+                  <CaretView key={k} italic={!!italic} />
+                ) : (
+                  <FocusView key={k} italic={italic instanceof InlineAttrEnd} />
+                )
+              ) : (
+                <AnchorView key={k} />
+              ),
+            );
+          }
+        }
+        elements.push(<InlineView key={inline.key()} inline={inline} />);
+        if (hasCursor) {
+          const cursorEnd = inline.cursorEnd();
+          const attr = inline.attr();
+          const italic = attr[CommonSliceType.i] && attr[CommonSliceType.i][0];
+          if (cursorEnd) {
+            const k = 'selection-end';
+            elements.push(
+              cursorEnd.isEndFocused() ? (
+                cursorEnd.isCollapsed() ? (
+                  <CaretView key={k} italic={!!italic} />
+                ) : (
+                  <FocusView key={k} left italic={italic instanceof InlineAttrStart} />
+                )
+              ) : (
+                <AnchorView key={k} />
+              ),
+            );
+          }
+        }
+      }
     } else {
       const children = block.children;
       const length = children.length;
diff --git a/src/json-crdt-peritext-ui/react/InlineView.tsx b/src/json-crdt-peritext-ui/react/InlineView.tsx
index 66685a67a6..6dad76767a 100644
--- a/src/json-crdt-peritext-ui/react/InlineView.tsx
+++ b/src/json-crdt-peritext-ui/react/InlineView.tsx
@@ -2,15 +2,9 @@ import * as React from 'react';
 import {put} from 'nano-theme';
 import {CssClass, ElementAttr} from '../constants';
 import {usePeritext} from './context';
-import {CaretView} from './selection/CaretView';
-import {FocusView} from './selection/FocusView';
-import {AnchorView} from './selection/AnchorView';
-import {InlineAttrEnd, InlineAttrStart, type Inline} from '../../json-crdt-extensions/peritext/block/Inline';
-import {CommonSliceType} from '../../json-crdt-extensions';
+import type {Inline} from '../../json-crdt-extensions/peritext/block/Inline';
 import type {SpanProps} from './types';
 
-const {createElement: h, Fragment} = React;
-
 put('.' + CssClass.Inline, {
   /**
    * Font *kerning* is the variable distance between every pair of characters.
@@ -70,45 +64,5 @@ export const InlineView: React.FC<InlineViewProps> = (props) => {
   for (const map of renderers) attr = map.text?.(attr, inline, ctx) ?? attr;
   let children: React.ReactNode = <span {...attr}>{text}</span>;
   for (const map of renderers) children = map.inline?.(props, children) ?? children;
-
-  if (inline.hasCursor()) {
-    const elements: React.ReactNode[] = [];
-    const attr = inline.attr();
-    const italic = attr[CommonSliceType.i] && attr[CommonSliceType.i][0];
-    const key = inline.key();
-    const cursorStart = inline.cursorStart();
-    if (cursorStart) {
-      const k = key + 'a';
-      elements.push(
-        cursorStart.isStartFocused() ? (
-          cursorStart.isCollapsed() ? (
-            <CaretView key={k} italic={!!italic} />
-          ) : (
-            <FocusView key={k} italic={italic instanceof InlineAttrEnd} />
-          )
-        ) : (
-          <AnchorView key={k} />
-        ),
-      );
-    }
-    elements.push(h(Fragment, {key}, children));
-    const cursorEnd = inline.cursorEnd();
-    if (cursorEnd) {
-      const k = key + 'b';
-      elements.push(
-        cursorEnd.isEndFocused() ? (
-          cursorEnd.isCollapsed() ? (
-            <CaretView key={k} italic={!!italic} />
-          ) : (
-            <FocusView key={k} left italic={italic instanceof InlineAttrStart} />
-          )
-        ) : (
-          <AnchorView key={k} />
-        ),
-      );
-    }
-    children = h(Fragment, null, elements);
-  }
-
   return children;
 };

From 469946fd1617d513611025d6cb4c41459b285889 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 9 Nov 2024 20:24:15 +0100
Subject: [PATCH 14/22] =?UTF-8?q?fix(json-crdt-peritext-ui):=20?=
 =?UTF-8?q?=F0=9F=90=9B=20correct=20anchor=20edge=20rendering?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../peritext/rga/Point.ts                     |  6 ++++-
 .../plugins/minimal/RenderAnchor.tsx          |  5 +---
 src/json-crdt-peritext-ui/react/BlockView.tsx | 26 +++++++------------
 3 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/src/json-crdt-extensions/peritext/rga/Point.ts b/src/json-crdt-extensions/peritext/rga/Point.ts
index 77120630c4..7d3154fdd7 100644
--- a/src/json-crdt-extensions/peritext/rga/Point.ts
+++ b/src/json-crdt-extensions/peritext/rga/Point.ts
@@ -1,7 +1,7 @@
 import {compare, type ITimestampStruct, printTs, equal, tick, containsId} from '../../../json-crdt-patch/clock';
 import {Anchor} from './constants';
 import {ChunkSlice} from '../util/ChunkSlice';
-import {updateId} from '../../../json-crdt/hash';
+import {hashId, updateId} from '../../../json-crdt/hash';
 import {Position} from '../constants';
 import type {AbstractRga, Chunk} from '../../../json-crdt/nodes/rga';
 import type {Stateful} from '../types';
@@ -481,6 +481,10 @@ export class Point<T = string> implements Pick<Stateful, 'refresh'>, Printable {
     return this.step(length / 2);
   }
 
+  public key(): number {
+    return hashId(this.id) + (this.anchor ? 0 : 1);
+  }
+
   // ----------------------------------------------------------------- Stateful
 
   public refresh(): number {
diff --git a/src/json-crdt-peritext-ui/plugins/minimal/RenderAnchor.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderAnchor.tsx
index 88fcd8d919..34ad670399 100644
--- a/src/json-crdt-peritext-ui/plugins/minimal/RenderAnchor.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/RenderAnchor.tsx
@@ -11,9 +11,6 @@ export const fadeInAnimation = keyframes({
   from: {
     tr: 'scale(0)',
   },
-  '75%': {
-    tr: 'scale(0)',
-  },
   to: {
     tr: 'scale(1)',
   },
@@ -38,7 +35,7 @@ const innerClass = rule({
   h: 'calc(min(16px,0.5em))',
   bdrad: '50%/30%',
   bg: DefaultRendererColors.ActiveCursor,
-  an: fadeInAnimation + ' .75s ease-out',
+  an: fadeInAnimation + ' .25s ease-out',
   animationFillMode: 'forwards',
 });
 
diff --git a/src/json-crdt-peritext-ui/react/BlockView.tsx b/src/json-crdt-peritext-ui/react/BlockView.tsx
index 58b2b84808..9569385f7d 100644
--- a/src/json-crdt-peritext-ui/react/BlockView.tsx
+++ b/src/json-crdt-peritext-ui/react/BlockView.tsx
@@ -26,26 +26,20 @@ export const BlockView: React.FC<BlockViewProps> = React.memo(
       for (const inline of block.texts()) {
         const hasCursor = inline.hasCursor();
         if (hasCursor) {
-          console.log('hasCursor');
-          const elements: React.ReactNode[] = [];
           const attr = inline.attr();
           const italic = attr[CommonSliceType.i] && attr[CommonSliceType.i][0];
-          const key = inline.key();
           const cursorStart = inline.cursorStart();
           if (cursorStart) {
-            console.log('cursorStart.isCollapsed()', cursorStart.isStartFocused(), cursorStart.isCollapsed());
-            const k = 'selection-start';
-            elements.push(
-              cursorStart.isStartFocused() ? (
-                cursorStart.isCollapsed() ? (
-                  <CaretView key={k} italic={!!italic} />
-                ) : (
-                  <FocusView key={k} italic={italic instanceof InlineAttrEnd} />
-                )
+            const k = cursorStart.start.key() + '-a';
+            let element: React.ReactNode;
+            if (cursorStart.isStartFocused()) {
+              element = cursorStart.isCollapsed() ? (
+                <CaretView key={k + 'caret'} italic={!!italic} />
               ) : (
-                <AnchorView key={k} />
-              ),
-            );
+                <FocusView key={k} italic={italic instanceof InlineAttrEnd} />
+              );
+            } else element = <AnchorView key={k} />;
+            elements.push(element);
           }
         }
         elements.push(<InlineView key={inline.key()} inline={inline} />);
@@ -54,7 +48,7 @@ export const BlockView: React.FC<BlockViewProps> = React.memo(
           const attr = inline.attr();
           const italic = attr[CommonSliceType.i] && attr[CommonSliceType.i][0];
           if (cursorEnd) {
-            const k = 'selection-end';
+            const k = cursorEnd.end.key() + '-b';
             elements.push(
               cursorEnd.isEndFocused() ? (
                 cursorEnd.isCollapsed() ? (

From e180e28ffccbd9082cc8aab4f9bf6bf9438022d3 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 9 Nov 2024 20:25:53 +0100
Subject: [PATCH 15/22] =?UTF-8?q?feat(json-crdt-peritext-ui):=20?=
 =?UTF-8?q?=F0=9F=8E=B8=20animate=20carret=20while=20typing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plugins/minimal/RenderCaret.tsx                 | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/json-crdt-peritext-ui/plugins/minimal/RenderCaret.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderCaret.tsx
index 8fb101d4ad..876e5d74bf 100644
--- a/src/json-crdt-peritext-ui/plugins/minimal/RenderCaret.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/RenderCaret.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import useHarmonicIntervalFn from 'react-use/lib/useHarmonicIntervalFn';
-import {rule} from 'nano-theme';
+import {keyframes, rule} from 'nano-theme';
 import {usePeritext} from '../../react/context';
 import {useSyncStore} from '../../react/hooks';
 import type {CaretViewProps} from '../../react/selection/CaretView';
@@ -8,6 +8,15 @@ import {DefaultRendererColors} from './constants';
 
 const ms = 350;
 
+export const moveAnimation = keyframes({
+  from: {
+    tr: 'scale(1.2)',
+  },
+  to: {
+    tr: 'scale(1)',
+  },
+});
+
 const blockClass = rule({
   pos: 'relative',
   d: 'inline-block',
@@ -28,6 +37,8 @@ const innerClass = rule({
   bg: DefaultRendererColors.ActiveCursor,
   bdrad: '0.0625em',
   'mix-blend-mode': 'multiply',
+  an: moveAnimation + ' .25s ease-out',
+  animationFillMode: 'forwards',
 });
 
 export interface RenderCaretProps extends CaretViewProps {

From 93a869d97e2a4642a8eaecaf3fb940529ebf34a2 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 9 Nov 2024 21:38:35 +0100
Subject: [PATCH 16/22] =?UTF-8?q?fix(json-crdt-peritext-ui):=20?=
 =?UTF-8?q?=F0=9F=90=9B=20make=20caret=20rotation=20more=20precise?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/json-crdt-peritext-ui/plugins/minimal/RenderCaret.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/json-crdt-peritext-ui/plugins/minimal/RenderCaret.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderCaret.tsx
index 876e5d74bf..d055e7faa4 100644
--- a/src/json-crdt-peritext-ui/plugins/minimal/RenderCaret.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/RenderCaret.tsx
@@ -60,7 +60,7 @@ export const RenderCaret: React.FC<RenderCaretProps> = ({italic, children}) => {
   };
 
   if (italic) {
-    style.transform = 'rotate(11deg)';
+    style.rotate = '11deg';
   }
 
   return (

From 1fb893ceae6c03eb7fc419999b0e0b3d6fedcc82 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 9 Nov 2024 21:48:12 +0100
Subject: [PATCH 17/22] =?UTF-8?q?feat(json-crdt-peritext-ui):=20?=
 =?UTF-8?q?=F0=9F=8E=B8=20improve=20slice=20italic=20focus=20edge=20render?=
 =?UTF-8?q?ing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/json-crdt-peritext-ui/react/BlockView.tsx | 28 +++++++------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/json-crdt-peritext-ui/react/BlockView.tsx b/src/json-crdt-peritext-ui/react/BlockView.tsx
index 9569385f7d..6a1811ab53 100644
--- a/src/json-crdt-peritext-ui/react/BlockView.tsx
+++ b/src/json-crdt-peritext-ui/react/BlockView.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
 import {LeafBlock} from '../../json-crdt-extensions/peritext/block/LeafBlock';
-import type {Block} from '../../json-crdt-extensions/peritext/block/Block';
 import {InlineView} from './InlineView';
 import {Char} from '../constants';
 import {usePeritext} from './context';
 import {CommonSliceType} from '../../json-crdt-extensions';
 import {CaretView} from './selection/CaretView';
 import {FocusView} from './selection/FocusView';
-import {InlineAttrEnd, InlineAttrStart} from '../../json-crdt-extensions/peritext/block/Inline';
+import {InlineAttrEnd, InlineAttrPassing, InlineAttrStart} from '../../json-crdt-extensions/peritext/block/Inline';
 import {AnchorView} from './selection/AnchorView';
+import type {Block} from '../../json-crdt-extensions/peritext/block/Block';
 
 export interface BlockViewProps {
   hash: number;
@@ -33,11 +33,8 @@ export const BlockView: React.FC<BlockViewProps> = React.memo(
             const k = cursorStart.start.key() + '-a';
             let element: React.ReactNode;
             if (cursorStart.isStartFocused()) {
-              element = cursorStart.isCollapsed() ? (
-                <CaretView key={k + 'caret'} italic={!!italic} />
-              ) : (
-                <FocusView key={k} italic={italic instanceof InlineAttrEnd} />
-              );
+              if (cursorStart.isCollapsed()) element = <CaretView key={k} italic={!!italic} />;
+              else element = <FocusView key={k} italic={italic instanceof InlineAttrEnd || italic instanceof InlineAttrPassing} />;
             } else element = <AnchorView key={k} />;
             elements.push(element);
           }
@@ -49,17 +46,12 @@ export const BlockView: React.FC<BlockViewProps> = React.memo(
           const italic = attr[CommonSliceType.i] && attr[CommonSliceType.i][0];
           if (cursorEnd) {
             const k = cursorEnd.end.key() + '-b';
-            elements.push(
-              cursorEnd.isEndFocused() ? (
-                cursorEnd.isCollapsed() ? (
-                  <CaretView key={k} italic={!!italic} />
-                ) : (
-                  <FocusView key={k} left italic={italic instanceof InlineAttrStart} />
-                )
-              ) : (
-                <AnchorView key={k} />
-              ),
-            );
+            let element: React.ReactNode;
+            if (cursorEnd.isEndFocused()) {
+              if (cursorEnd.isCollapsed()) element = <CaretView key={k} italic={!!italic} />;
+              else element = <FocusView key={k} left italic={italic instanceof InlineAttrStart || italic instanceof InlineAttrPassing} />;
+            } else element = <AnchorView key={k} />;
+            elements.push(element);
           }
         }
       }

From e1a8deb494da0873d9b2b9c3b8c34a44f3885d28 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 9 Nov 2024 22:12:55 +0100
Subject: [PATCH 18/22] =?UTF-8?q?feat(json-crdt-extensions):=20?=
 =?UTF-8?q?=F0=9F=8E=B8=20improve=20storage=20detection=20when=20deleting?=
 =?UTF-8?q?=20slices?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../peritext/editor/Editor.ts                 | 45 +++++++++++++++++--
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/json-crdt-extensions/peritext/editor/Editor.ts b/src/json-crdt-extensions/peritext/editor/Editor.ts
index a99d5b4814..b27f751047 100644
--- a/src/json-crdt-extensions/peritext/editor/Editor.ts
+++ b/src/json-crdt-extensions/peritext/editor/Editor.ts
@@ -6,6 +6,7 @@ import {isLetter, isPunctuation, isWhitespace} from './util';
 import {Anchor} from '../rga/constants';
 import {MarkerOverlayPoint} from '../overlay/MarkerOverlayPoint';
 import {UndefEndIter, type UndefIterator} from '../../../util/iterator';
+import {PersistedSlice} from '../slice/PersistedSlice';
 import type {SliceType} from '../slice';
 import type {ChunkSlice} from '../util/ChunkSlice';
 import type {Peritext} from '../Peritext';
@@ -481,8 +482,15 @@ export class Editor<T = string> {
   }
 
   // --------------------------------------------------------------- formatting
+
+  protected getSliceStore(slice: PersistedSlice<T>): EditorSlices<T> | void {
+    const sid = slice.id.sid;
+    if (sid === this.saved.slices.set.doc.clock.sid) return this.saved;
+    if (sid === this.extra.slices.set.doc.clock.sid) return this.extra;
+    if (sid === this.local.slices.set.doc.clock.sid) return this.local;
+  }
   
-  public toggleFormatting(type: SliceType, data?: unknown, slices: EditorSlices<T> = this.saved): void {
+  public toggleExclusiveFormatting(type: SliceType, data?: unknown, store: EditorSlices<T> = this.saved): void {
     // TODO: handle mutually exclusive slices (<sub>, <sub>)
     const overlay = this.txt.overlay;
     overlay.refresh(); // TODO: Refresh for `overlay.stat()` calls. Is it actually needed?
@@ -491,20 +499,49 @@ export class Editor<T = string> {
       const needToRemoveFormatting = complete.has(type);
       makeRangeExtendable(cursor);
       const contained = overlay.findContained(cursor);
-      for (const slice of contained) if (slice.type === type) slices.del(slice.id);
+      for (const slice of contained) {
+        if (slice instanceof PersistedSlice && slice.type === type) {
+          const deletionStore = this.getSliceStore(slice);
+          if (deletionStore) deletionStore.del(slice.id);
+        }
+      }
       if (needToRemoveFormatting) {
         overlay.refresh();
         const [complete2, partial2] = overlay.stat(cursor, 1e6);
         const needsErase = complete2.has(type) || partial2.has(type);
-        if (needsErase) slices.insErase(type);
+        if (needsErase) store.insErase(type);
         continue;
       } else {
         if (cursor.start.isAbs() || cursor.end.isAbs()) continue;
-        slices.insOverwrite(type, data);
+        store.insOverwrite(type, data);
       }
     }
   }
 
+  // public eraseFormatting(range: Range<T>, store: EditorSlices<T> = this.saved): void {
+  //   // TODO: Determine `store` from the found slice.
+  //   const overlay = this.txt.overlay;
+  //   overlay.refresh();
+  //   const contained = overlay.findContained(range);
+  //   for (const slice of contained) store.del(slice.id);
+  //   const overlapping = overlay.findOverlapping(range);
+  //   for (const slice of overlapping) {
+  //     switch (slice.behavior) {
+  //       case SliceBehavior.One:
+  //       case SliceBehavior.Many: {
+  //         store.insErase(slice.type);
+  //       }
+  //     }
+  //   }
+  // }
+
+  // public clearFormatting(range: Range<T>, store: EditorSlices<T> = this.saved): void {
+  //   const overlay = this.txt.overlay;
+  //   overlay.refresh();
+  //   const overlapping = overlay.findOverlapping(range);
+  //   for (const slice of overlapping) store.del(slice.id);
+  // }
+
   // ------------------------------------------------------------------ various
 
   public point(at: Position<T>): Point<T> {

From 0414fad11149e7e02a40814d5a015f0ba679b0a6 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sat, 9 Nov 2024 22:21:16 +0100
Subject: [PATCH 19/22] =?UTF-8?q?chore(json-crdt-extensions):=20?=
 =?UTF-8?q?=F0=9F=A4=96=20various=20small=20code=20cleanups?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/json-crdt-extensions/peritext/slice/Slices.ts         | 1 +
 src/json-crdt-peritext-ui/__demos__/components/App.tsx    | 2 +-
 src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts | 2 +-
 src/json-crdt-peritext-ui/plugins/minimal/RenderFocus.tsx | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/json-crdt-extensions/peritext/slice/Slices.ts b/src/json-crdt-extensions/peritext/slice/Slices.ts
index ae6623262f..901fffd3c9 100644
--- a/src/json-crdt-extensions/peritext/slice/Slices.ts
+++ b/src/json-crdt-extensions/peritext/slice/Slices.ts
@@ -139,6 +139,7 @@ export class Slices<T = string> implements Stateful, Printable {
     this.list.del(id);
     const set = this.set;
     const api = set.doc.api;
+    if (!set.findById(id)) return;
     // TODO: Is it worth checking if the slice is already deleted?
     api.builder.del(set.id, [tss(id.sid, id.time, 1)]);
     api.apply();
diff --git a/src/json-crdt-peritext-ui/__demos__/components/App.tsx b/src/json-crdt-peritext-ui/__demos__/components/App.tsx
index a79f36ba4a..0edea7d3db 100644
--- a/src/json-crdt-peritext-ui/__demos__/components/App.tsx
+++ b/src/json-crdt-peritext-ui/__demos__/components/App.tsx
@@ -17,7 +17,7 @@ export const App: React.FC = () => {
     <Provider theme={'light'}>
       <GlobalCss />
       <div style={{maxWidth: '640px', fontSize: '21px', margin: '32px auto'}}>
-        <PeritextView peritext={peritext} renderers={[debugRenderers({enabled: false}), renderers]} />
+        <PeritextView peritext={peritext} renderers={[debugRenderers({enabled: true}), renderers]} />
       </div>
     </Provider>
   );
diff --git a/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts b/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
index 76bcd354dd..9eb021e93b 100644
--- a/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
+++ b/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
@@ -108,7 +108,7 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
         break;
       }
       case 'one': {
-        editor.toggleFormatting(type, data, slices);
+        editor.toggleExclusiveFormatting(type, data, slices);
         break;
       }
       case 'erase': {
diff --git a/src/json-crdt-peritext-ui/plugins/minimal/RenderFocus.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderFocus.tsx
index 77fdfa88b5..2ca403d744 100644
--- a/src/json-crdt-peritext-ui/plugins/minimal/RenderFocus.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/RenderFocus.tsx
@@ -51,7 +51,7 @@ export const RenderFocus: React.FC<RenderFocusProps> = ({left, italic, children}
   const style: React.CSSProperties = focus ? {} : {background: DefaultRendererColors.InactiveCursor, animation: 'none'};
 
   if (italic) {
-    style.transform = 'rotate(11deg)';
+    style.rotate = '11deg';
   }
 
   return (

From b94ec9d385ce04d3548a929ecf55f83650191feb Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 10 Nov 2024 00:41:25 +0100
Subject: [PATCH 20/22] =?UTF-8?q?feat(json-crdt-peritext-ui):=20?=
 =?UTF-8?q?=F0=9F=8E=B8=20add=20ability=20to=20erase=20formatting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../peritext/editor/Editor.ts                 | 59 +++++++++++--------
 .../events/PeritextEventDefaults.ts           |  7 ++-
 src/json-crdt-peritext-ui/events/types.ts     |  9 +--
 .../plugins/minimal/TopToolbar/index.tsx      | 12 ++++
 4 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/src/json-crdt-extensions/peritext/editor/Editor.ts b/src/json-crdt-extensions/peritext/editor/Editor.ts
index b27f751047..5488aa16c9 100644
--- a/src/json-crdt-extensions/peritext/editor/Editor.ts
+++ b/src/json-crdt-extensions/peritext/editor/Editor.ts
@@ -518,29 +518,42 @@ export class Editor<T = string> {
     }
   }
 
-  // public eraseFormatting(range: Range<T>, store: EditorSlices<T> = this.saved): void {
-  //   // TODO: Determine `store` from the found slice.
-  //   const overlay = this.txt.overlay;
-  //   overlay.refresh();
-  //   const contained = overlay.findContained(range);
-  //   for (const slice of contained) store.del(slice.id);
-  //   const overlapping = overlay.findOverlapping(range);
-  //   for (const slice of overlapping) {
-  //     switch (slice.behavior) {
-  //       case SliceBehavior.One:
-  //       case SliceBehavior.Many: {
-  //         store.insErase(slice.type);
-  //       }
-  //     }
-  //   }
-  // }
-
-  // public clearFormatting(range: Range<T>, store: EditorSlices<T> = this.saved): void {
-  //   const overlay = this.txt.overlay;
-  //   overlay.refresh();
-  //   const overlapping = overlay.findOverlapping(range);
-  //   for (const slice of overlapping) store.del(slice.id);
-  // }
+  public eraseFormatting(store: EditorSlices<T> = this.saved): void {
+    const overlay = this.txt.overlay;
+    for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
+      overlay.refresh();
+      const contained = overlay.findContained(cursor);
+      for (const slice of contained) {
+        if (slice instanceof PersistedSlice) {
+          switch (slice.behavior) {
+            case SliceBehavior.One:
+            case SliceBehavior.Many:
+            case SliceBehavior.Erase: {
+              const deletionStore = this.getSliceStore(slice);
+              if (deletionStore) deletionStore.del(slice.id);
+            }
+          }
+        }
+      }
+      overlay.refresh();
+      const overlapping = overlay.findOverlapping(cursor);
+      for (const slice of overlapping) {
+        switch (slice.behavior) {
+          case SliceBehavior.One:
+          case SliceBehavior.Many: {
+            store.insErase(slice.type);
+          }
+        }
+      }
+    }
+  }
+
+  public clearFormatting(range: Range<T>, store: EditorSlices<T> = this.saved): void {
+    const overlay = this.txt.overlay;
+    overlay.refresh();
+    const overlapping = overlay.findOverlapping(range);
+    for (const slice of overlapping) store.del(slice.id);
+  }
 
   // ------------------------------------------------------------------ various
 
diff --git a/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts b/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
index 9eb021e93b..b04d2a40c5 100644
--- a/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
+++ b/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
@@ -1,6 +1,6 @@
+import {CursorAnchor} from '../../json-crdt-extensions/peritext/slice/constants';
 import type {Peritext} from '../../json-crdt-extensions/peritext';
 import type {EditorSlices} from '../../json-crdt-extensions/peritext/editor/EditorSlices';
-import {CursorAnchor} from '../../json-crdt-extensions/peritext/slice/constants';
 import type {PeritextEventHandlerMap, PeritextEventTarget} from './PeritextEventTarget';
 import type * as events from './types';
 
@@ -104,15 +104,18 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
     const slices: EditorSlices = store === 'saved' ? editor.saved : store === 'extra' ? editor.extra : editor.local;
     switch (behavior) {
       case 'many': {
+        if (type === undefined) throw new Error('TYPE_REQUIRED');
         slices.insStack(type, data);
         break;
       }
       case 'one': {
+        if (type === undefined) throw new Error('TYPE_REQUIRED');
         editor.toggleExclusiveFormatting(type, data, slices);
         break;
       }
       case 'erase': {
-        slices.insErase(type, data);
+        if (type === undefined) editor.eraseFormatting(slices);
+        else slices.insErase(type, data);
         break;
       }
     }
diff --git a/src/json-crdt-peritext-ui/events/types.ts b/src/json-crdt-peritext-ui/events/types.ts
index 775491e99f..8401668e3c 100644
--- a/src/json-crdt-peritext-ui/events/types.ts
+++ b/src/json-crdt-peritext-ui/events/types.ts
@@ -192,7 +192,7 @@ export interface FormatDetail {
    * formatting, in which case a nested structure like
    * `<p><blockquote><h1>text</h1></blockquote></p>` is created.
    */
-  type: number | string;
+  type?: number | string;
 
   /**
    * Arbitrary data associated with the formatting. Usually, stored with
@@ -225,12 +225,6 @@ export interface FormatDetail {
    * @default 'saved'
    */
   store?: 'saved' | 'extra' | 'local';
-
-  /**
-   * Specifies the range of the annotation. If not specified, the annotation
-   * is applied to all cursors in the document at their current positions.
-   */
-  pos?: [start: Position, end: Position][];
 }
 
 // biome-ignore lint: empty interface is expected
@@ -257,5 +251,6 @@ export type PeritextEventMap = {
   delete: DeleteDetail;
   cursor: CursorDetail;
   format: FormatDetail;
+  // remove: FormatDetail;
   marker: MarkerDetail;
 };
diff --git a/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
index ad8f4b1225..489d29f78e 100644
--- a/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
@@ -38,6 +38,15 @@ export const TopToolbar: React.FC<TopToolbarProps> = () => {
     </Button>
   );
 
+  const button2 = (name: React.ReactNode, onClick: React.MouseEventHandler) => (
+    <Button
+      onClick={onClick}
+      onMouseDown={(e) => e.preventDefault()}
+    >
+      {name}
+    </Button>
+  );
+
   return (
     <div className={blockClass}>
       {button(CommonSliceType.b, 'Bold')}
@@ -53,6 +62,9 @@ export const TopToolbar: React.FC<TopToolbarProps> = () => {
       {button(CommonSliceType.math, 'Math')}
       {button(CommonSliceType.hidden, 'Spoiler')}
       {button(CommonSliceType.bookmark, 'Bookmark')}
+      {button2('Erase', () => {
+        ctx.dom.et.format({behavior: 'erase'});
+      })}
     </div>
   );
 };

From e063802149a09e9e835579fed242526c2819ce79 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 10 Nov 2024 00:49:54 +0100
Subject: [PATCH 21/22] =?UTF-8?q?feat(json-crdt-peritext-ui):=20?=
 =?UTF-8?q?=F0=9F=8E=B8=20add=20"clear"=20inline=20formatting=20behavior?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/json-crdt-extensions/peritext/editor/Editor.ts       | 8 +++++---
 .../events/PeritextEventDefaults.ts                      | 4 ++++
 src/json-crdt-peritext-ui/events/types.ts                | 9 ++++++++-
 .../plugins/minimal/TopToolbar/index.tsx                 | 3 +++
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/json-crdt-extensions/peritext/editor/Editor.ts b/src/json-crdt-extensions/peritext/editor/Editor.ts
index 5488aa16c9..75d9bdb0a6 100644
--- a/src/json-crdt-extensions/peritext/editor/Editor.ts
+++ b/src/json-crdt-extensions/peritext/editor/Editor.ts
@@ -548,11 +548,13 @@ export class Editor<T = string> {
     }
   }
 
-  public clearFormatting(range: Range<T>, store: EditorSlices<T> = this.saved): void {
+  public clearFormatting(store: EditorSlices<T> = this.saved): void {
     const overlay = this.txt.overlay;
     overlay.refresh();
-    const overlapping = overlay.findOverlapping(range);
-    for (const slice of overlapping) store.del(slice.id);
+    for (let i = this.cursors0(), cursor = i(); cursor; cursor = i()) {
+      const overlapping = overlay.findOverlapping(cursor);
+      for (const slice of overlapping) store.del(slice.id);
+    }
   }
 
   // ------------------------------------------------------------------ various
diff --git a/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts b/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
index b04d2a40c5..0c89ccb02d 100644
--- a/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
+++ b/src/json-crdt-peritext-ui/events/PeritextEventDefaults.ts
@@ -118,6 +118,10 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
         else slices.insErase(type, data);
         break;
       }
+      case 'clear': {
+        editor.clearFormatting(slices);
+        break;
+      }
     }
   };
 
diff --git a/src/json-crdt-peritext-ui/events/types.ts b/src/json-crdt-peritext-ui/events/types.ts
index 8401668e3c..e0f222d7f9 100644
--- a/src/json-crdt-peritext-ui/events/types.ts
+++ b/src/json-crdt-peritext-ui/events/types.ts
@@ -211,9 +211,16 @@ export interface FormatDetail {
    * character. The `'erase'` behavior is used to remove the `'many`' or
    * `'one'` annotation from the the given range.
    * 
+   * The special `'clear'` behavior is used to remove all annotations
+   * that intersect with any part of any of the cursors in the document. Usage:
+   * 
+   * ```js
+   * {type: 'clear'}
+   * ```
+   * 
    * @default 'one'
    */
-  behavior?: 'one' | 'many' | 'erase';
+  behavior?: 'one' | 'many' | 'erase' | 'clear';
 
   /**
    * The slice set where the annotation will be stored. `'saved'` is the main
diff --git a/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
index 489d29f78e..361af907d3 100644
--- a/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
@@ -65,6 +65,9 @@ export const TopToolbar: React.FC<TopToolbarProps> = () => {
       {button2('Erase', () => {
         ctx.dom.et.format({behavior: 'erase'});
       })}
+      {button2('Clear', () => {
+        ctx.dom.et.format({behavior: 'clear'});
+      })}
     </div>
   );
 };

From 32889ab010eed49c66f2f7d2b5c13cedaacb99e8 Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Sun, 10 Nov 2024 08:24:42 +0100
Subject: [PATCH 22/22] =?UTF-8?q?style:=20=F0=9F=92=84=20fix=20linter=20is?=
 =?UTF-8?q?sues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../peritext/editor/Editor.ts                 | 20 +++++++++----------
 .../peritext/slice/PersistedSlice.ts          |  9 ++++++++-
 .../peritext/slice/constants.ts               |  4 ++--
 src/json-crdt-peritext-ui/events/types.ts     | 16 +++++++--------
 .../plugins/minimal/TopToolbar/index.tsx      | 11 ++--------
 src/json-crdt-peritext-ui/react/BlockView.tsx | 14 +++++++++++--
 6 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/src/json-crdt-extensions/peritext/editor/Editor.ts b/src/json-crdt-extensions/peritext/editor/Editor.ts
index 75d9bdb0a6..9ed5be3368 100644
--- a/src/json-crdt-extensions/peritext/editor/Editor.ts
+++ b/src/json-crdt-extensions/peritext/editor/Editor.ts
@@ -15,13 +15,13 @@ import type {Range} from '../rga/Range';
 import type {CharIterator, CharPredicate, Position, TextRangeUnit} from './types';
 
 /**
-   * For inline boolean ("Overwrite") slices, both range endpoints should be
-   * attached to {@link Anchor.Before} as per the Peritext paper. This way, say
-   * bold text, automatically extends to include the next character typed as
-   * user types.
-   *
-   * @param range The range to be adjusted.
-   */
+ * For inline boolean ("Overwrite") slices, both range endpoints should be
+ * attached to {@link Anchor.Before} as per the Peritext paper. This way, say
+ * bold text, automatically extends to include the next character typed as
+ * user types.
+ *
+ * @param range The range to be adjusted.
+ */
 const makeRangeExtendable = <T>(range: Range<T>): void => {
   if (range.end.anchor !== Anchor.Before || range.start.anchor !== Anchor.Before) {
     const start = range.start.clone();
@@ -483,13 +483,14 @@ export class Editor<T = string> {
 
   // --------------------------------------------------------------- formatting
 
-  protected getSliceStore(slice: PersistedSlice<T>): EditorSlices<T> | void {
+  protected getSliceStore(slice: PersistedSlice<T>): EditorSlices<T> | undefined {
     const sid = slice.id.sid;
     if (sid === this.saved.slices.set.doc.clock.sid) return this.saved;
     if (sid === this.extra.slices.set.doc.clock.sid) return this.extra;
     if (sid === this.local.slices.set.doc.clock.sid) return this.local;
+    return;
   }
-  
+
   public toggleExclusiveFormatting(type: SliceType, data?: unknown, store: EditorSlices<T> = this.saved): void {
     // TODO: handle mutually exclusive slices (<sub>, <sub>)
     const overlay = this.txt.overlay;
@@ -510,7 +511,6 @@ export class Editor<T = string> {
         const [complete2, partial2] = overlay.stat(cursor, 1e6);
         const needsErase = complete2.has(type) || partial2.has(type);
         if (needsErase) store.insErase(type);
-        continue;
       } else {
         if (cursor.start.isAbs() || cursor.end.isAbs()) continue;
         store.insOverwrite(type, data);
diff --git a/src/json-crdt-extensions/peritext/slice/PersistedSlice.ts b/src/json-crdt-extensions/peritext/slice/PersistedSlice.ts
index a1a7f701d2..b8d12c4b51 100644
--- a/src/json-crdt-extensions/peritext/slice/PersistedSlice.ts
+++ b/src/json-crdt-extensions/peritext/slice/PersistedSlice.ts
@@ -4,7 +4,14 @@ import {Range} from '../rga/Range';
 import {updateNode} from '../../../json-crdt/hash';
 import {printTree} from 'tree-dump/lib/printTree';
 import type {Anchor} from '../rga/constants';
-import {SliceHeaderMask, SliceHeaderShift, SliceBehavior, SliceTupleIndex, SliceBehaviorName, CommonSliceType} from './constants';
+import {
+  SliceHeaderMask,
+  SliceHeaderShift,
+  SliceBehavior,
+  SliceTupleIndex,
+  SliceBehaviorName,
+  CommonSliceType,
+} from './constants';
 import {CONST} from '../../../json-hash';
 import {Timestamp} from '../../../json-crdt-patch/clock';
 import type {VecNode} from '../../../json-crdt/nodes';
diff --git a/src/json-crdt-extensions/peritext/slice/constants.ts b/src/json-crdt-extensions/peritext/slice/constants.ts
index 0c22eba9b8..a3adf9852c 100644
--- a/src/json-crdt-extensions/peritext/slice/constants.ts
+++ b/src/json-crdt-extensions/peritext/slice/constants.ts
@@ -89,7 +89,7 @@ export enum SliceBehavior {
    * or more annotations of the same type to apply to the same text. Slices with
    * behavior `Many` are appended to the stack of attributes for a specific
    * slice type. With the most recent annotation on top.
-   * 
+   *
    * Slices with behavior `Many` are used for inline formatting, like for links,
    * comments, etc. Where multiple annotations of the same type can be applied
    * to the same text.
@@ -111,7 +111,7 @@ export enum SliceBehavior {
    * range. The erase slices soft remove only the annotations which were applied
    * before the erase slice, as determined by the logical clock (there could
    * be many layers of annotations applied and erased).
-   * 
+   *
    * Usually slices with behavior `Erase` are used to reverse inline exclusive
    * (`One`) inline formatting, like bold, italic, etc.
    */
diff --git a/src/json-crdt-peritext-ui/events/types.ts b/src/json-crdt-peritext-ui/events/types.ts
index e0f222d7f9..2f8904cb84 100644
--- a/src/json-crdt-peritext-ui/events/types.ts
+++ b/src/json-crdt-peritext-ui/events/types.ts
@@ -178,15 +178,15 @@ export interface FormatDetail {
   /**
    * Type of the annotation. The type is used to determine the visual style of
    * the annotation, for example, the type `'bold'` may render the text in bold.
-   * 
+   *
    * For common formatting use the {@link CommonSliceType} enum. It contains
    * a unique numeric value for each common formatting types. Numeric values
    * are best for performance and memory usage. Values in the rage -64 to 64 are
    * reserved for common formatting types.
-   * 
+   *
    * For custom formatting, you can use a string value, for example,
    * `'highlight'`. Or use an integer with absolute value greater than 64.
-   * 
+   *
    * Inline formatting types are restricted to a single string or integer value.
    * Nester formatting, say `['p', 'blockquote', 'h1']` is reserved for block
    * formatting, in which case a nested structure like
@@ -198,7 +198,7 @@ export interface FormatDetail {
    * Arbitrary data associated with the formatting. Usually, stored with
    * annotations of "stack" behavior, for example, an "<a>" tag annotation may
    * store the href attribute in this field.
-   * 
+   *
    * @default undefined
    */
   data?: unknown;
@@ -210,14 +210,14 @@ export interface FormatDetail {
    * the annotation is not stacked, only one such annotation can be applied per
    * character. The `'erase'` behavior is used to remove the `'many`' or
    * `'one'` annotation from the the given range.
-   * 
+   *
    * The special `'clear'` behavior is used to remove all annotations
    * that intersect with any part of any of the cursors in the document. Usage:
-   * 
+   *
    * ```js
    * {type: 'clear'}
    * ```
-   * 
+   *
    * @default 'one'
    */
   behavior?: 'one' | 'many' | 'erase' | 'clear';
@@ -228,7 +228,7 @@ export interface FormatDetail {
    * is an ephemeral document, which is not persisted but can be replicated
    * across clients. `'local'` is a local document, which is accessible only to
    * the local client, for example, for storing cursor or selection information.
-   * 
+   *
    * @default 'saved'
    */
   store?: 'saved' | 'extra' | 'local';
diff --git a/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
index 361af907d3..976233d99c 100644
--- a/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
+++ b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx
@@ -29,20 +29,13 @@ export const TopToolbar: React.FC<TopToolbarProps> = () => {
   const [complete] = ctx.peritext.overlay.stat(ctx.peritext.editor.cursor);
 
   const button = (type: string | number, name: React.ReactNode) => (
-    <Button
-      onClick={() => ctx.dom.et.format(type)}
-      onMouseDown={(e) => e.preventDefault()}
-      active={complete.has(type)}
-    >
+    <Button onClick={() => ctx.dom.et.format(type)} onMouseDown={(e) => e.preventDefault()} active={complete.has(type)}>
       {name}
     </Button>
   );
 
   const button2 = (name: React.ReactNode, onClick: React.MouseEventHandler) => (
-    <Button
-      onClick={onClick}
-      onMouseDown={(e) => e.preventDefault()}
-    >
+    <Button onClick={onClick} onMouseDown={(e) => e.preventDefault()}>
       {name}
     </Button>
   );
diff --git a/src/json-crdt-peritext-ui/react/BlockView.tsx b/src/json-crdt-peritext-ui/react/BlockView.tsx
index 6a1811ab53..00f741b45b 100644
--- a/src/json-crdt-peritext-ui/react/BlockView.tsx
+++ b/src/json-crdt-peritext-ui/react/BlockView.tsx
@@ -34,7 +34,10 @@ export const BlockView: React.FC<BlockViewProps> = React.memo(
             let element: React.ReactNode;
             if (cursorStart.isStartFocused()) {
               if (cursorStart.isCollapsed()) element = <CaretView key={k} italic={!!italic} />;
-              else element = <FocusView key={k} italic={italic instanceof InlineAttrEnd || italic instanceof InlineAttrPassing} />;
+              else
+                element = (
+                  <FocusView key={k} italic={italic instanceof InlineAttrEnd || italic instanceof InlineAttrPassing} />
+                );
             } else element = <AnchorView key={k} />;
             elements.push(element);
           }
@@ -49,7 +52,14 @@ export const BlockView: React.FC<BlockViewProps> = React.memo(
             let element: React.ReactNode;
             if (cursorEnd.isEndFocused()) {
               if (cursorEnd.isCollapsed()) element = <CaretView key={k} italic={!!italic} />;
-              else element = <FocusView key={k} left italic={italic instanceof InlineAttrStart || italic instanceof InlineAttrPassing} />;
+              else
+                element = (
+                  <FocusView
+                    key={k}
+                    left
+                    italic={italic instanceof InlineAttrStart || italic instanceof InlineAttrPassing}
+                  />
+                );
             } else element = <AnchorView key={k} />;
             elements.push(element);
           }