@apollohg/react-native-rich-text-editor 2.0.0 → 2.0.2

package/src/EditorTheme.ts

@@ -150,16 +150,18 @@ export interface EditorContentInsets {
 
 function stripUndefined(value: unknown): unknown {
     if (Array.isArray(value)) {
-        return value.map((item) => stripUndefined(item)).filter((item) => item !== undefined);
+        return value.map(item => stripUndefined(item)).filter(item => item !== undefined);
     }
 
     if (value != null && typeof value === 'object') {
         const entries = Object.entries(value as Record<string, unknown>)
-            .map(([key, entryValue]) => [key, stripUndefined(entryValue)] as const)
-            .filter(([, entryValue]) => entryValue !== undefined);
+            .map(([ key, entryValue ]) => [ key, stripUndefined(entryValue) ] as const)
+            .filter(([ , entryValue ]) => entryValue !== undefined);
+
         if (entries.length === 0) {
             return undefined;
         }
+
         return Object.fromEntries(entries);
     }
 
@@ -170,21 +172,26 @@ function stripUndefined(value: unknown): unknown {
     return value;
 }
 
-// Mentions are configured on the mentions addon, not on EditorTheme; native
-// still reads them from the theme payload.
+/**
+ * Mentions are configured on the mentions addon, not on EditorTheme; native
+ * still reads them from the theme payload.
+ */
 export function serializeEditorTheme(
     theme?: EditorTheme,
     mentionTheme?: EditorMentionTheme
 ): string | undefined {
     const normalized = theme === undefined ? undefined : normalizeEditorTheme(theme);
+
     const cleanedTheme =
         normalized && (normalized.styles || normalized.toolbar)
             ? stripUndefined(normalized)
             : undefined;
+
     const base =
         cleanedTheme && typeof cleanedTheme === 'object'
             ? (cleanedTheme as Record<string, unknown>)
             : undefined;
+
     const cleanedMentions = mentionTheme
         ? stripUndefined(normalizeEditorMentionTheme(mentionTheme))
         : undefined;
@@ -192,5 +199,6 @@ export function serializeEditorTheme(
     if (cleanedMentions == null) {
         return base ? JSON.stringify(base) : undefined;
     }
+
     return JSON.stringify({ version: 1, ...(base ?? {}), mentions: cleanedMentions });
 }

package/src/EditorToolbarComponent.tsx

@@ -6,7 +6,7 @@ import { useEditorToolbarPresentation } from './useEditorToolbarPresentation';
 
 /**
  * A JavaScript formatting toolbar. `RichTextEditor` renders one for you
- * when `showToolbar` is set — reach for this component directly only to place
+ * when `showToolbar` is set : reach for this component directly only to place
  * the toolbar somewhere the editor cannot, in which case wire every handler
  * to the editor's ref and feed it `activeState` and `historyState` from the
  * editor's callbacks.
@@ -19,5 +19,6 @@ export function EditorToolbar(props: EditorToolbarProps) {
     const state = useEditorToolbarState(props);
     const items = useEditorToolbarItems(state);
     const interactions = useEditorToolbarInteractions({ ...state, ...items });
+
     return useEditorToolbarPresentation({ ...state, ...items, ...interactions });
 }

package/src/EditorToolbarRegistry.tsx

@@ -82,29 +82,31 @@ export function areToolbarFrameListsEqual(
     if (left.length !== right.length) {
         return false;
     }
+
     return left.every((frame, index) => areToolbarFramesEqual(frame, right[index]));
 }
 
 export function notifyEditorToolbarFrameListeners() {
-    editorToolbarFrameListeners.forEach((listener) => listener());
+    editorToolbarFrameListeners.forEach(listener => listener());
 }
 
 export function notifyEditorToolbarMentionStateListeners() {
-    editorToolbarMentionStateListeners.forEach((listener) => listener());
+    editorToolbarMentionStateListeners.forEach(listener => listener());
 }
 
 export function getEditorToolbarFramesSnapshot(ownerId: number): EditorToolbarFrame[] {
     return Array.from(editorToolbarFrames.values())
         .filter(
-            (registration) =>
+            registration =>
                 registration.ownerId === ownerId ||
                 (registration.ownerId == null && activeEditorToolbarFrameOwnerId === ownerId)
         )
-        .map((registration) => registration.frame);
+        .map(registration => registration.frame);
 }
 
 export function subscribeEditorToolbarMentionState(listener: EditorToolbarFrameListener) {
     editorToolbarMentionStateListeners.add(listener);
+
     return () => {
         editorToolbarMentionStateListeners.delete(listener);
     };
@@ -131,10 +133,12 @@ export function registerEditorToolbarFrame(
         if (editorToolbarFrames.delete(id)) {
             notifyEditorToolbarFrameListeners();
         }
+
         return;
     }
 
     const currentRegistration = editorToolbarFrames.get(id);
+
     if (
         currentRegistration?.ownerId === ownerId &&
         areToolbarFramesEqual(currentRegistration.frame, frame)
@@ -174,33 +178,36 @@ export function setActiveEditorToolbarFrameOwnerForEditor(ownerId: number, isAct
     const nextOwnerId = isActive
         ? ownerId
         : activeEditorToolbarFrameOwnerId === ownerId
-          ? null
-          : activeEditorToolbarFrameOwnerId;
+            ? null
+            : activeEditorToolbarFrameOwnerId;
+
     if (activeEditorToolbarFrameOwnerId === nextOwnerId) {
         return;
     }
+
     activeEditorToolbarFrameOwnerId = nextOwnerId;
     notifyEditorToolbarFrameListeners();
 }
 
 export function useEditorToolbarFrames(ownerId: number): readonly EditorToolbarFrame[] {
-    const [frames, setFrames] = useState<EditorToolbarFrame[]>(() =>
-        getEditorToolbarFramesSnapshot(ownerId)
-    );
+    const [ frames, setFrames ] = useState<EditorToolbarFrame[]>(() =>
+        getEditorToolbarFramesSnapshot(ownerId));
 
     useEffect(() => {
         const listener = () => {
             const nextFrames = getEditorToolbarFramesSnapshot(ownerId);
-            setFrames((currentFrames) =>
-                areToolbarFrameListsEqual(currentFrames, nextFrames) ? currentFrames : nextFrames
-            );
+
+            setFrames(currentFrames =>
+                areToolbarFrameListsEqual(currentFrames, nextFrames) ? currentFrames : nextFrames);
         };
+
         editorToolbarFrameListeners.add(listener);
         listener();
+
         return () => {
             editorToolbarFrameListeners.delete(listener);
         };
-    }, [ownerId]);
+    }, [ ownerId ]);
 
     return frames;
 }
@@ -213,8 +220,10 @@ export function setEditorToolbarMentionState(
         if (editorToolbarMentionState?.ownerId !== ownerId) {
             return;
         }
+
         editorToolbarMentionState = null;
         notifyEditorToolbarMentionStateListeners();
+
         return;
     }
 
@@ -222,6 +231,7 @@ export function setEditorToolbarMentionState(
         ownerId,
         ...state,
     };
+
     notifyEditorToolbarMentionStateListeners();
 }
 

package/src/EditorToolbarTypes.tsx

@@ -64,9 +64,9 @@ export interface EditorToolbarMaterialIcon {
 /**
  * A toolbar button's icon:
  *
- * - `default` — one of the package's built-in icons.
- * - `glyph` — arbitrary text or an emoji, drawn as-is.
- * - `platform` — per-platform native icons, with `fallbackText` when the
+ * - `default` : one of the package's built-in icons.
+ * - `glyph` : arbitrary text or an emoji, drawn as-is.
+ * - `platform` : per-platform native icons, with `fallbackText` when the
  *   platform cannot resolve the named icon.
  */
 export type EditorToolbarIcon =
@@ -102,14 +102,14 @@ export interface EditorToolbarButtonStyle {
  * name), an `icon`, an optional `key` (defaults to something derived from the
  * variant), and an optional `placement`.
  *
- * - `mark` — toggles the named mark; active and enabled state come from the engine.
- * - `link` / `image` — calls the editor's `onRequestLink` / `onRequestImage`.
- * - `heading` — toggles the given heading level.
- * - `blockquote` — toggles blockquote wrapping.
- * - `list` — toggles the given list type.
- * - `command` — runs an {@link EditorToolbarCommand}.
- * - `node` — inserts the named node type, e.g. `'horizontalRule'`.
- * - `action` — host-defined; calls `onToolbarAction` with its `key`, and the
+ * - `mark` : toggles the named mark; active and enabled state come from the engine.
+ * - `link` / `image` : calls the editor's `onRequestLink` / `onRequestImage`.
+ * - `heading` : toggles the given heading level.
+ * - `blockquote` : toggles blockquote wrapping.
+ * - `list` : toggles the given list type.
+ * - `command` : runs an {@link EditorToolbarCommand}.
+ * - `node` : inserts the named node type, e.g. `'horizontalRule'`.
+ * - `action` : host-defined; calls `onToolbarAction` with its `key`, and the
  *   host supplies `isActive`/`isDisabled` since the engine knows nothing about it.
  */
 export type EditorToolbarLeafItem = (
@@ -191,7 +191,7 @@ export type EditorToolbarLeafItem = (
 export type EditorToolbarGroupChildItem = EditorToolbarLeafItem;
 
 /**
- * Several buttons collapsed behind one — heading levels, say. The group
+ * Several buttons collapsed behind one : heading levels, say. The group
  * reports active when any child is active, and disabled when every child is.
  */
 export interface EditorToolbarGroupItem {

package/src/EditorToolbarVisuals.tsx

@@ -18,7 +18,7 @@ export const MENU_MARGIN = 8;
 
 export const MENU_WIDTH = 192;
 
-export const KEYBOARD_FRAME_REMEASURE_DELAYS_MS = [50, 150, 300] as const;
+export const KEYBOARD_FRAME_REMEASURE_DELAYS_MS = [ 50, 150, 300 ] as const;
 
 export const ACTIVE_BG = 'rgba(0, 122, 255, 0.12)';
 
@@ -61,7 +61,7 @@ export const DEFAULT_GLYPH_ICONS: Record<EditorToolbarDefaultIconId, string> = {
     indentList: '→',
     outdentList: '←',
     lineBreak: '↵',
-    horizontalRule: '—',
+    horizontalRule: ':',
     undo: '↩',
     redo: '↪',
 };
@@ -95,6 +95,7 @@ export function resolveMentionSuggestionDisplayLabel(
     trigger: string
 ): string {
     const label = suggestion.label?.trim() || suggestion.title;
+
     return trigger.length > 0 && !label.startsWith(trigger) ? `${trigger}${label}` : label;
 }
 
@@ -108,6 +109,7 @@ export function ToolbarIcon({
     size?: number;
 }) {
     const materialIconName = resolveMaterialIconName(icon);
+
     if (materialIconName) {
         return (
             <View style={styles.iconContainer}>
@@ -117,9 +119,10 @@ export function ToolbarIcon({
     }
 
     const glyph = resolveGlyphText(icon) ?? '?';
+
     return (
         <View style={styles.iconContainer}>
-            <Text style={[styles.iconText, size == null ? null : { fontSize: size }, { color }]}>
+            <Text style={[ styles.iconText, size == null ? null : { fontSize: size }, { color } ]}>
                 {glyph}
             </Text>
         </View>

package/src/EditorUpdateRevision.ts

@@ -22,5 +22,6 @@ export function allocateEditorUpdateRevision(
             },
         };
     }
+
     return { revision: currentRevision + 1 };
 }