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

package/src/EditorMentionThemeNormalization.ts

@@ -10,14 +10,25 @@ export type SerializedEditorMentionTheme = Omit<EditorMentionTheme, 'node'> & {
 export function normalizeEditorMentionTheme(
     theme?: EditorMentionTheme
 ): SerializedEditorMentionTheme | undefined {
-    if (theme === undefined) return undefined;
-    if (!validEditorMentionTheme(theme)) throw new TypeError('Invalid mention theme');
-    if (!theme.node) return theme;
+    if (theme === undefined) {
+        return undefined;
+    }
+
+    if (!validEditorMentionTheme(theme)) {
+        throw new TypeError('Invalid mention theme');
+    }
+
+    if (!theme.node) {
+        return theme;
+    }
+
     const node = theme.node as Record<string, unknown>;
     const { textColor, style: existingStyle, ...appearance } = node;
+
     const style = normalizeEditorTheme({
-        mention: [{ color: textColor }, appearance, existingStyle],
+        mention: [ { color: textColor }, appearance, existingStyle ],
     }).styles?.mention;
+
     return {
         ...theme,
         node: { style },

package/src/EditorMentionThemeValidation.ts

@@ -5,12 +5,13 @@ import type {
     EditorMentionTheme,
 } from './EditorTheme';
 import { normalizeEditorTheme } from './EditorStyleSheetNormalization';
+
 function isPlainRecord(value: unknown): value is Record<string, unknown> {
     return value !== null && typeof value === 'object' && !Array.isArray(value);
 }
 
 function hasOnlyOwnKeys(value: Record<string, unknown>, fields: readonly string[]): boolean {
-    return Reflect.ownKeys(value).every((key) => typeof key === 'string' && fields.includes(key));
+    return Reflect.ownKeys(value).every(key => typeof key === 'string' && fields.includes(key));
 }
 
 export const MENTION_NODE_STRING_FIELDS = [
@@ -51,7 +52,17 @@ export const MENTION_SUGGESTIONS_NUMBER_FIELDS = [
 
 export const EDITOR_MENTION_THEME_FONT_WEIGHTS: ReadonlySet<
     NonNullable<EditorMentionNodeTheme['fontWeight']>
-> = new Set(['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900']);
+> = new Set([ 'normal',
+    'bold',
+    '100',
+    '200',
+    '300',
+    '400',
+    '500',
+    '600',
+    '700',
+    '800',
+    '900' ]);
 
 export const EDITOR_MENTION_THEME_FIELDS = [
     'node',
@@ -74,14 +85,20 @@ export function validMentionThemeSection(
     numberFields: readonly string[],
     extraFields: readonly string[]
 ): value is Record<string, unknown> {
-    if (!isPlainRecord(value)) return false;
-    if (!hasOnlyOwnKeys(value, [...stringFields, ...numberFields, ...extraFields])) return false;
+    if (!isPlainRecord(value)) {
+        return false;
+    }
+
+    if (!hasOnlyOwnKeys(value, [ ...stringFields, ...numberFields, ...extraFields ])) {
+        return false;
+    }
+
     return (
         stringFields.every(
-            (field) => value[field] === undefined || typeof value[field] === 'string'
+            field => value[field] === undefined || typeof value[field] === 'string'
         ) &&
         numberFields.every(
-            (field) =>
+            field =>
                 value[field] === undefined ||
                 (typeof value[field] === 'number' && Number.isFinite(value[field]))
         )
@@ -94,40 +111,60 @@ export function validEditorMentionTheme(value: unknown): value is EditorMentionT
     }
 
     const { node, suggestions } = value;
+
     if (node !== undefined) {
-        if (!isPlainRecord(node)) return false;
+        if (!isPlainRecord(node)) {
+            return false;
+        }
+
         const { textColor, style, ...appearance } = node;
-        if (textColor !== undefined && typeof textColor !== 'string') return false;
+
+        if (textColor !== undefined && typeof textColor !== 'string') {
+            return false;
+        }
+
         try {
-            normalizeEditorTheme({ mention: [{ color: textColor }, appearance] });
+            normalizeEditorTheme({ mention: [ { color: textColor }, appearance ] });
+
             if (style !== undefined) {
-                if (!isPlainRecord(style)) return false;
+                if (!isPlainRecord(style)) {
+                    return false;
+                }
+
                 normalizeEditorTheme({ mention: style });
             }
         } catch {
             return false;
         }
     }
-    if (suggestions === undefined) return true;
+
+    if (suggestions === undefined) {
+        return true;
+    }
+
     if (
         !validMentionThemeSection(
             suggestions,
             MENTION_SUGGESTIONS_STRING_FIELDS,
             MENTION_SUGGESTIONS_NUMBER_FIELDS,
-            ['option']
+            [ 'option' ]
         )
     ) {
         return false;
     }
 
     const option = suggestions.option;
-    if (option === undefined) return true;
+
+    if (option === undefined) {
+        return true;
+    }
+
     return (
         validMentionThemeSection(
             option,
             MENTION_OPTION_STRING_FIELDS,
             MENTION_OPTION_NUMBER_FIELDS,
-            ['fontWeight']
+            [ 'fontWeight' ]
         ) && validMentionFontWeight(option.fontWeight)
     );
 }

package/src/EditorStyleSheet.ts

@@ -4,6 +4,7 @@ import { normalizeEditorTheme } from './EditorStyleSheetNormalization';
 export const EditorStyleSheet = {
     create<const T extends object>(styles: T & ExactEditorTheme<T>): T {
         normalizeEditorTheme(styles);
+
         return styles;
     },
 };

package/src/EditorStyleSheetNormalization.ts

@@ -17,27 +17,32 @@ const typography = [
     'textDecorationColor',
     'textDecorationStyle',
 ];
-const sides = ['Top', 'Right', 'Bottom', 'Left'];
-const corners = ['TopLeft', 'TopRight', 'BottomRight', 'BottomLeft'];
+
+const sides = [ 'Top', 'Right', 'Bottom', 'Left' ];
+const corners = [ 'TopLeft', 'TopRight', 'BottomRight', 'BottomLeft' ];
+
 const border = [
     'borderWidth',
     'borderColor',
     'borderStyle',
     'borderRadius',
-    ...sides.flatMap((side) => [`border${side}Width`, `border${side}Color`]),
-    ...corners.map((corner) => `border${corner}Radius`),
+    ...sides.flatMap(side => [ `border${side}Width`, `border${side}Color` ]),
+    ...corners.map(corner => `border${corner}Radius`),
 ];
+
 const spacing = (prefix: string) => [
     prefix,
     `${prefix}Horizontal`,
     `${prefix}Vertical`,
-    ...sides.map((side) => `${prefix}${side}`),
+    ...sides.map(side => `${prefix}${side}`),
 ];
-const surface = ['backgroundColor', ...border, ...spacing('padding')];
-const box = [...surface, ...spacing('margin')];
-const block = [...typography, ...box, 'textAlign'];
-const inline = [...typography, 'backgroundColor'];
-const checkbox = [...border, 'backgroundColor', 'checkColor'];
+
+const surface = [ 'backgroundColor', ...border, ...spacing('padding') ];
+const box = [ ...surface, ...spacing('margin') ];
+const block = [ ...typography, ...box, 'textAlign' ];
+const inline = [ ...typography, 'backgroundColor' ];
+const checkbox = [ ...border, 'backgroundColor', 'checkColor' ];
+
 const fields: Record<keyof EditorStyleMap, readonly string[]> = {
     content: surface,
     text: typography,
@@ -50,32 +55,47 @@ const fields: Record<keyof EditorStyleMap, readonly string[]> = {
     h6: block,
     blockquote: block,
     codeBlock: block,
-    bulletList: [...block, 'indent', 'baseIndentMultiplier'],
-    orderedList: [...block, 'indent', 'baseIndentMultiplier'],
-    taskList: [...block, 'indent', 'baseIndentMultiplier'],
+    bulletList: [ ...block, 'indent', 'baseIndentMultiplier' ],
+    orderedList: [ ...block, 'indent', 'baseIndentMultiplier' ],
+    taskList: [ ...block, 'indent', 'baseIndentMultiplier' ],
     listItem: block,
     taskItem: block,
-    listMarker: ['color', 'scale', 'gap', 'ordered'],
-    taskCheckbox: [...checkbox, 'size', 'gap', 'checked'],
-    horizontalRule: [...border, ...spacing('margin'), 'backgroundColor', 'height'],
-    image: [...box, 'resizeMode'],
+    listMarker: [ 'color', 'scale', 'gap', 'ordered' ],
+    taskCheckbox: [ ...checkbox, 'size', 'gap', 'checked' ],
+    horizontalRule: [ ...border, ...spacing('margin'), 'backgroundColor', 'height' ],
+    image: [ ...box, 'resizeMode' ],
     link: inline,
     inlineCode: inline,
     bold: inline,
     italic: inline,
     underline: inline,
     strike: inline,
-    mention: [...inline, ...border],
+    mention: [ ...inline, ...border ],
     placeholder: typography,
 };
+
 const enums: Record<string, readonly string[]> = {
-    fontStyle: ['normal', 'italic'],
-    fontWeight: ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
-    textAlign: ['auto', 'left', 'right', 'center', 'justify'],
-    textDecorationLine: ['none', 'underline', 'line-through', 'underline line-through'],
-    textDecorationStyle: ['solid', 'double', 'dotted', 'dashed'],
-    borderStyle: ['solid', 'dashed', 'dotted'],
-    resizeMode: ['contain', 'cover', 'stretch'],
+    fontStyle: [ 'normal', 'italic' ],
+    fontWeight: [ 'normal',
+        'bold',
+        '100',
+        '200',
+        '300',
+        '400',
+        '500',
+        '600',
+        '700',
+        '800',
+        '900' ],
+    textAlign: [ 'auto',
+        'left',
+        'right',
+        'center',
+        'justify' ],
+    textDecorationLine: [ 'none', 'underline', 'line-through', 'underline line-through' ],
+    textDecorationStyle: [ 'solid', 'double', 'dotted', 'dashed' ],
+    borderStyle: [ 'solid', 'dashed', 'dotted' ],
+    resizeMode: [ 'contain', 'cover', 'stretch' ],
 };
 
 function invalid(path: string, reason: string): never {
@@ -83,66 +103,122 @@ function invalid(path: string, reason: string): never {
 }
 
 function record(value: unknown): value is Record<string, unknown> {
-    if (value == null || typeof value !== 'object' || Array.isArray(value)) return false;
+    if (value == null || typeof value !== 'object' || Array.isArray(value)) {
+        return false;
+    }
+
     const prototype = Object.getPrototypeOf(value);
+
     return prototype === Object.prototype || prototype === null;
 }
 
 export function normalizeEditorColor(value: unknown, path: string): string {
-    if (typeof value !== 'string') return invalid(path, 'expected a color string');
+    if (typeof value !== 'string') {
+        return invalid(path, 'expected a color string');
+    }
+
     const argb = processColor(value);
-    if (typeof argb !== 'number') return invalid(path, 'unrecognized color');
+
+    if (typeof argb !== 'number') {
+        return invalid(path, 'unrecognized color');
+    }
+
     const rgba = ((argb << 8) | (argb >>> 24)) >>> 0;
+
     return `#${rgba.toString(16).padStart(8, '0')}`;
 }
 
 function orderedMarker(value: unknown, path: string): Record<string, unknown> {
-    if (!record(value)) return invalid(path, 'expected an ordered marker object');
+    if (!record(value)) {
+        return invalid(path, 'expected an ordered marker object');
+    }
+
     const result: Record<string, unknown> = {};
-    for (const [key, entry] of Object.entries(value)) {
-        if (key !== 'schemes' && key !== 'suffix')
+
+    for (const [ key, entry ] of Object.entries(value)) {
+        if (key !== 'schemes' && key !== 'suffix') {
             invalid(`${path}.${key}`, 'unsupported property');
-        if (entry === undefined) continue;
+        }
+
+        if (entry === undefined) {
+            continue;
+        }
+
         if (key === 'suffix') {
-            if (entry !== '.' && entry !== ')') invalid(`${path}.${key}`, 'expected . or )');
+            if (entry !== '.' && entry !== ')') {
+                invalid(`${path}.${key}`, 'expected . or )');
+            }
+
             result[key] = entry;
         } else {
-            const schemes = ['decimal', 'lowerAlpha', 'upperAlpha', 'lowerRoman', 'upperRoman'];
+            const schemes = [ 'decimal',
+                'lowerAlpha',
+                'upperAlpha',
+                'lowerRoman',
+                'upperRoman' ];
+
             if (
                 !Array.isArray(entry) ||
                 entry.length === 0 ||
-                !entry.every((item) => typeof item === 'string' && schemes.includes(item))
+                !entry.every(item => typeof item === 'string' && schemes.includes(item))
             ) {
                 invalid(`${path}.${key}`, 'expected a nonempty array of numbering schemes');
             }
-            result[key] = [...entry];
+
+            result[key] = [ ...entry ];
         }
     }
+
     return result;
 }
 
 function property(key: string, value: unknown, path: string): unknown {
-    if (value === undefined) return undefined;
-    if (key === 'ordered') return orderedMarker(value, path);
-    if (key === 'checked') return normalizeStyle(value, checkbox, path);
-    if (key === 'color' || key.endsWith('Color')) return normalizeEditorColor(value, path);
+    if (value === undefined) {
+        return undefined;
+    }
+
+    if (key === 'ordered') {
+        return orderedMarker(value, path);
+    }
+
+    if (key === 'checked') {
+        return normalizeStyle(value, checkbox, path);
+    }
+
+    if (key === 'color' || key.endsWith('Color')) {
+        return normalizeEditorColor(value, path);
+    }
+
     if (key === 'fontFamily') {
-        if (typeof value !== 'string' || value.length === 0)
+        if (typeof value !== 'string' || value.length === 0) {
             invalid(path, 'expected a nonempty font family');
+        }
+
         return value;
     }
+
     if (enums[key]) {
         const candidate = key === 'fontWeight' && typeof value === 'number' ? String(value) : value;
-        if (typeof candidate !== 'string' || !enums[key].includes(candidate))
+
+        if (typeof candidate !== 'string' || !enums[key].includes(candidate)) {
             invalid(path, 'unsupported value');
+        }
+
         return candidate;
     }
-    if (typeof value !== 'number' || !Number.isFinite(value))
+
+    if (typeof value !== 'number' || !Number.isFinite(value)) {
         invalid(path, 'expected a finite number');
-    if (['fontSize', 'lineHeight', 'size', 'scale'].includes(key) && value <= 0)
+    }
+
+    if ([ 'fontSize', 'lineHeight', 'size', 'scale' ].includes(key) && value <= 0) {
         invalid(path, 'expected a positive number');
-    if (!key.startsWith('margin') && key !== 'letterSpacing' && value < 0)
+    }
+
+    if (!key.startsWith('margin') && key !== 'letterSpacing' && value < 0) {
         invalid(path, 'expected a nonnegative number');
+    }
+
     return value;
 }
 
@@ -153,67 +229,122 @@ function normalizeStyle(
 ): Record<string, unknown> {
     const raw: Record<string, unknown> = {};
     const ancestors = new Set<object>();
+
     function append(entry: unknown, depth: number): void {
-        if (entry === false || entry == null) return;
-        if (depth > 64) invalid(path, 'style arrays are nested too deeply');
+        if (entry === false || entry == null) {
+            return;
+        }
+
+        if (depth > 64) {
+            invalid(path, 'style arrays are nested too deeply');
+        }
+
         if (Array.isArray(entry)) {
-            if (ancestors.has(entry)) invalid(path, 'cyclic style array');
+            if (ancestors.has(entry)) {
+                invalid(path, 'cyclic style array');
+            }
+
             ancestors.add(entry);
-            entry.forEach((item) => append(item, depth + 1));
+            entry.forEach(item => append(item, depth + 1));
             ancestors.delete(entry);
+
             return;
         }
-        if (!record(entry)) invalid(path, 'expected a style object or array');
-        for (const [key, field] of Object.entries(entry)) {
-            if (!allowed.includes(key)) invalid(`${path}.${key}`, 'unsupported property');
+
+        if (!record(entry)) {
+            invalid(path, 'expected a style object or array');
+        }
+
+        for (const [ key, field ] of Object.entries(entry)) {
+            if (!allowed.includes(key)) {
+                invalid(`${path}.${key}`, 'unsupported property');
+            }
+
             raw[key] = property(key, field, `${path}.${key}`);
         }
     }
+
     append(value, 0);
+
     const result = Object.fromEntries(
-        Object.entries(raw).filter(([, value]) => value !== undefined)
+        Object.entries(raw).filter(([ , value ]) => value !== undefined)
     );
-    for (const prefix of ['margin', 'padding']) {
+
+    for (const prefix of [ 'margin', 'padding' ]) {
         for (const side of sides) {
             const axis = side === 'Top' || side === 'Bottom' ? 'Vertical' : 'Horizontal';
             const resolved = raw[`${prefix}${side}`] ?? raw[`${prefix}${axis}`] ?? raw[prefix];
-            if (resolved !== undefined) result[`${prefix}${side}`] = resolved;
+
+            if (resolved !== undefined) {
+                result[`${prefix}${side}`] = resolved;
+            }
         }
+
         delete result[prefix];
         delete result[`${prefix}Horizontal`];
         delete result[`${prefix}Vertical`];
     }
-    for (const suffix of ['Width', 'Color']) {
+
+    for (const suffix of [ 'Width', 'Color' ]) {
         for (const side of sides) {
             const resolved = raw[`border${side}${suffix}`] ?? raw[`border${suffix}`];
-            if (resolved !== undefined) result[`border${side}${suffix}`] = resolved;
+
+            if (resolved !== undefined) {
+                result[`border${side}${suffix}`] = resolved;
+            }
         }
+
         delete result[`border${suffix}`];
     }
+
     for (const corner of corners) {
         const resolved = raw[`border${corner}Radius`] ?? raw.borderRadius;
-        if (resolved !== undefined) result[`border${corner}Radius`] = resolved;
+
+        if (resolved !== undefined) {
+            result[`border${corner}Radius`] = resolved;
+        }
     }
+
     delete result.borderRadius;
+
     return result;
 }
 
 export function normalizeEditorTheme(theme: unknown): NormalizedEditorTheme {
-    if (!record(theme)) invalid('theme', 'expected a named style map');
+    if (!record(theme)) {
+        invalid('theme', 'expected a named style map');
+    }
+
     const styles: Partial<Record<keyof EditorStyleMap, NormalizedEditorStyle>> = {};
     const result: NormalizedEditorTheme = { version: 1 };
-    for (const [key, value] of Object.entries(theme)) {
+
+    for (const [ key, value ] of Object.entries(theme)) {
         if (key === 'toolbar') {
             if (value !== undefined) {
-                if (!record(value)) invalid('toolbar', 'expected toolbar configuration');
+                if (!record(value)) {
+                    invalid('toolbar', 'expected toolbar configuration');
+                }
+
                 result.toolbar = { ...value };
             }
+
             continue;
         }
-        if (!Object.prototype.hasOwnProperty.call(fields, key)) invalid(key, 'unsupported element');
+
+        if (!Object.prototype.hasOwnProperty.call(fields, key)) {
+            invalid(key, 'unsupported element');
+        }
+
         const style = normalizeStyle(value, fields[key as keyof EditorStyleMap], key);
-        if (Object.keys(style).length) styles[key as keyof EditorStyleMap] = style;
+
+        if (Object.keys(style).length) {
+            styles[key as keyof EditorStyleMap] = style;
+        }
     }
-    if (Object.keys(styles).length) result.styles = styles;
+
+    if (Object.keys(styles).length) {
+        result.styles = styles;
+    }
+
     return result;
 }

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 });
 }