@apollohg/react-native-prose-editor 0.1.1 → 0.3.0

package/android/src/main/java/com/apollohg/editor/RichTextEditorView.kt

@@ -2,6 +2,7 @@ package com.apollohg.editor
 
 import android.content.Context
 import android.graphics.Color
+import android.graphics.RectF
 import android.graphics.drawable.GradientDrawable
 import android.util.AttributeSet
 import android.view.MotionEvent
@@ -17,6 +18,7 @@ class RichTextEditorView @JvmOverloads constructor(
     attrs: AttributeSet? = null,
     defStyleAttr: Int = 0
 ) : LinearLayout(context, attrs, defStyleAttr) {
+    val editorViewport: FrameLayout
 
     private class EditorScrollView(context: Context) : ScrollView(context) {
         private fun updateParentIntercept(action: Int) {
@@ -43,8 +45,11 @@ class RichTextEditorView @JvmOverloads constructor(
 
     val editorEditText: EditorEditText
     val editorScrollView: ScrollView
+    private val remoteSelectionOverlayView: RemoteSelectionOverlayView
+    private val imageResizeOverlayView: ImageResizeOverlayView
 
     private var heightBehavior: EditorHeightBehavior = EditorHeightBehavior.FIXED
+    private var imageResizingEnabled = true
     private var theme: EditorTheme? = null
     private var baseBackgroundColor: Int = Color.WHITE
     private var viewportBottomInsetPx: Int = 0
@@ -59,6 +64,7 @@ class RichTextEditorView @JvmOverloads constructor(
             } else {
                 editorEditText.unbindEditor()
             }
+            refreshOverlays()
         }
 
     init {
@@ -69,9 +75,39 @@ class RichTextEditorView @JvmOverloads constructor(
             clipToPadding = false
             isFillViewport = false
         }
+        editorViewport = FrameLayout(context)
+        remoteSelectionOverlayView = RemoteSelectionOverlayView(context)
+        imageResizeOverlayView = ImageResizeOverlayView(context)
         editorScrollView.addView(editorEditText, createEditorLayoutParams())
+        editorViewport.addView(
+            editorScrollView,
+            FrameLayout.LayoutParams(
+                ViewGroup.LayoutParams.MATCH_PARENT,
+                ViewGroup.LayoutParams.MATCH_PARENT
+            )
+        )
+        editorViewport.addView(
+            remoteSelectionOverlayView,
+            FrameLayout.LayoutParams(
+                ViewGroup.LayoutParams.MATCH_PARENT,
+                ViewGroup.LayoutParams.MATCH_PARENT
+            )
+        )
+        editorViewport.addView(
+            imageResizeOverlayView,
+            FrameLayout.LayoutParams(
+                ViewGroup.LayoutParams.MATCH_PARENT,
+                ViewGroup.LayoutParams.MATCH_PARENT
+            )
+        )
+        remoteSelectionOverlayView.bind(this)
+        imageResizeOverlayView.bind(this)
+        editorScrollView.setOnScrollChangeListener { _, _, _, _, _ ->
+            refreshOverlays()
+        }
+        editorEditText.onSelectionOrContentMayChange = { refreshOverlays() }
 
-        addView(editorScrollView, createContainerLayoutParams())
+        addView(editorViewport, createContainerLayoutParams())
         updateScrollContainerAppearance()
         updateScrollContainerInsets()
     }
@@ -84,6 +120,7 @@ class RichTextEditorView @JvmOverloads constructor(
         baseBackgroundColor = backgroundColor
         editorEditText.setBaseStyle(textSizePx, textColor, backgroundColor)
         updateScrollContainerAppearance()
+        refreshOverlays()
     }
 
     fun applyTheme(theme: EditorTheme?) {
@@ -100,8 +137,10 @@ class RichTextEditorView @JvmOverloads constructor(
                     childHeight + editorScrollView.paddingTop + editorScrollView.paddingBottom - editorScrollView.height
                 )
                 editorScrollView.scrollTo(0, previousScrollY.coerceIn(0, maxScrollY))
+                refreshOverlays()
             }
         }
+        refreshOverlays()
     }
 
     fun setHeightBehavior(heightBehavior: EditorHeightBehavior) {
@@ -109,7 +148,7 @@ class RichTextEditorView @JvmOverloads constructor(
         this.heightBehavior = heightBehavior
         editorEditText.setHeightBehavior(heightBehavior)
         editorEditText.layoutParams = createEditorLayoutParams()
-        editorScrollView.layoutParams = createContainerLayoutParams()
+        editorViewport.layoutParams = createContainerLayoutParams()
         editorScrollView.isVerticalScrollBarEnabled = heightBehavior == EditorHeightBehavior.FIXED
         editorScrollView.overScrollMode = if (heightBehavior == EditorHeightBehavior.FIXED) {
             OVER_SCROLL_IF_CONTENT_SCROLLS
@@ -117,18 +156,53 @@ class RichTextEditorView @JvmOverloads constructor(
             OVER_SCROLL_NEVER
         }
         updateScrollContainerInsets()
+        refreshOverlays()
         requestLayout()
     }
 
+    fun setImageResizingEnabled(enabled: Boolean) {
+        if (imageResizingEnabled == enabled) return
+        imageResizingEnabled = enabled
+        editorEditText.setImageResizingEnabled(enabled)
+        refreshOverlays()
+    }
+
     fun setViewportBottomInsetPx(bottomInsetPx: Int) {
         val clampedInset = bottomInsetPx.coerceAtLeast(0)
         if (viewportBottomInsetPx == clampedInset) return
         viewportBottomInsetPx = clampedInset
         updateScrollContainerInsets()
         editorEditText.setViewportBottomInsetPx(clampedInset)
+        refreshOverlays()
         requestLayout()
     }
 
+    fun setRemoteSelections(selections: List<RemoteSelectionDecoration>) {
+        remoteSelectionOverlayView.setRemoteSelections(selections)
+    }
+
+    fun refreshRemoteSelections() {
+        remoteSelectionOverlayView.invalidate()
+    }
+
+    fun imageResizeOverlayRectForTesting(): android.graphics.RectF? =
+        imageResizeOverlayView.visibleRectForTesting()
+
+    fun resizeSelectedImageForTesting(widthPx: Float, heightPx: Float) {
+        imageResizeOverlayView.simulateResizeForTesting(widthPx, heightPx)
+    }
+
+    fun remoteSelectionDebugSnapshotsForTesting(): List<RemoteSelectionDebugSnapshot> =
+        remoteSelectionOverlayView.debugSnapshotsForTesting()
+
+    fun setRemoteSelectionScalarResolverForTesting(resolver: (Long, Int) -> Int) {
+        remoteSelectionOverlayView.docToScalarResolver = resolver
+    }
+
+    fun setRemoteSelectionEditorIdForTesting(editorId: Long) {
+        remoteSelectionOverlayView.editorIdOverrideForTesting = editorId
+    }
+
     fun setContent(html: String) {
         if (editorId == 0L) return
         val renderJSON = editorSetHtml(editorId.toULong(), html)
@@ -157,16 +231,16 @@ class RichTextEditorView @JvmOverloads constructor(
         val childWidthSpec = getChildMeasureSpec(
             widthMeasureSpec,
             paddingLeft + paddingRight,
-            editorScrollView.layoutParams.width
+            editorViewport.layoutParams.width
         )
         val childHeightSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
-        editorScrollView.measure(childWidthSpec, childHeightSpec)
+        editorViewport.measure(childWidthSpec, childHeightSpec)
 
         val measuredWidth = resolveSize(
-            editorScrollView.measuredWidth + paddingLeft + paddingRight,
+            editorViewport.measuredWidth + paddingLeft + paddingRight,
             widthMeasureSpec
         )
-        val desiredHeight = editorScrollView.measuredHeight + paddingTop + paddingBottom
+        val desiredHeight = editorViewport.measuredHeight + paddingTop + paddingBottom
         val measuredHeight = when (MeasureSpec.getMode(heightMeasureSpec)) {
             MeasureSpec.AT_MOST -> desiredHeight.coerceAtMost(MeasureSpec.getSize(heightMeasureSpec))
             else -> desiredHeight
@@ -176,11 +250,12 @@ class RichTextEditorView @JvmOverloads constructor(
 
     private fun updateScrollContainerAppearance() {
         val cornerRadiusPx = (theme?.borderRadius ?: 0f) * resources.displayMetrics.density
-        editorScrollView.background = GradientDrawable().apply {
+        editorViewport.background = GradientDrawable().apply {
             cornerRadius = cornerRadiusPx
             setColor(theme?.backgroundColor ?: baseBackgroundColor)
         }
-        editorScrollView.clipToOutline = cornerRadiusPx > 0f
+        editorViewport.clipToOutline = cornerRadiusPx > 0f
+        editorScrollView.setBackgroundColor(Color.TRANSPARENT)
         appliedCornerRadiusPx = cornerRadiusPx
     }
 
@@ -208,4 +283,46 @@ class RichTextEditorView @JvmOverloads constructor(
             ViewGroup.LayoutParams.MATCH_PARENT,
             ViewGroup.LayoutParams.WRAP_CONTENT
         )
+
+    internal fun selectedImageGeometry(): EditorEditText.SelectedImageGeometry? {
+        val geometry = editorEditText.selectedImageGeometry() ?: return null
+        return EditorEditText.SelectedImageGeometry(
+            docPos = geometry.docPos,
+            rect = RectF(
+                editorViewport.left + editorScrollView.left + editorEditText.left + geometry.rect.left,
+                editorViewport.top + editorScrollView.top + editorEditText.top + geometry.rect.top - editorScrollView.scrollY,
+                editorViewport.left + editorScrollView.left + editorEditText.left + geometry.rect.right,
+                editorViewport.top + editorScrollView.top + editorEditText.top + geometry.rect.bottom - editorScrollView.scrollY
+            )
+        )
+    }
+
+    internal fun maximumImageWidthPx(): Float {
+        val availableWidth =
+            maxOf(editorEditText.width, editorEditText.measuredWidth) -
+                editorEditText.compoundPaddingLeft -
+                editorEditText.compoundPaddingRight
+        return availableWidth.coerceAtLeast(48).toFloat()
+    }
+
+    internal fun clampImageSize(
+        widthPx: Float,
+        heightPx: Float,
+        maximumWidthPx: Float = maximumImageWidthPx()
+    ): Pair<Float, Float> {
+        val aspectRatio = maxOf(widthPx / maxOf(heightPx, 1f), 0.1f)
+        val clampedWidth = minOf(maxOf(48f, maximumWidthPx), maxOf(48f, widthPx))
+        val clampedHeight = maxOf(48f, clampedWidth / aspectRatio)
+        return clampedWidth to clampedHeight
+    }
+
+    internal fun resizeImage(docPos: Int, widthPx: Float, heightPx: Float) {
+        val (clampedWidth, clampedHeight) = clampImageSize(widthPx, heightPx)
+        editorEditText.resizeImageAtDocPos(docPos, clampedWidth, clampedHeight)
+    }
+
+    private fun refreshOverlays() {
+        remoteSelectionOverlayView.invalidate()
+        imageResizeOverlayView.refresh()
+    }
 }

package/{src/EditorTheme.ts → dist/EditorTheme.d.ts}

@@ -1,18 +1,5 @@
-export type EditorFontWeight =
-    | 'normal'
-    | 'bold'
-    | '100'
-    | '200'
-    | '300'
-    | '400'
-    | '500'
-    | '600'
-    | '700'
-    | '800'
-    | '900';
-
+export type EditorFontWeight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
 export type EditorFontStyle = 'normal' | 'italic';
-
 export interface EditorMentionTheme {
     textColor?: string;
     backgroundColor?: string;
@@ -30,7 +17,6 @@ export interface EditorMentionTheme {
     optionHighlightedBackgroundColor?: string;
     optionHighlightedTextColor?: string;
 }
-
 export interface EditorTextStyle {
     fontFamily?: string;
     fontSize?: number;
@@ -40,7 +26,6 @@ export interface EditorTextStyle {
     lineHeight?: number;
     spacingAfter?: number;
 }
-
 export interface EditorHeadingTheme {
     h1?: EditorTextStyle;
     h2?: EditorTextStyle;
@@ -49,21 +34,27 @@ export interface EditorHeadingTheme {
     h5?: EditorTextStyle;
     h6?: EditorTextStyle;
 }
-
 export interface EditorListTheme {
     indent?: number;
     itemSpacing?: number;
     markerColor?: string;
     markerScale?: number;
 }
-
 export interface EditorHorizontalRuleTheme {
     color?: string;
     thickness?: number;
     verticalMargin?: number;
 }
-
+export interface EditorBlockquoteTheme {
+    text?: EditorTextStyle;
+    indent?: number;
+    borderColor?: string;
+    borderWidth?: number;
+    markerGap?: number;
+}
+export type EditorToolbarAppearance = 'custom' | 'native';
 export interface EditorToolbarTheme {
+    appearance?: EditorToolbarAppearance;
     backgroundColor?: string;
     borderColor?: string;
     borderWidth?: number;
@@ -77,17 +68,16 @@ export interface EditorToolbarTheme {
     buttonActiveBackgroundColor?: string;
     buttonBorderRadius?: number;
 }
-
 export interface EditorContentInsets {
     top?: number;
     right?: number;
     bottom?: number;
     left?: number;
 }
-
 export interface EditorTheme {
     text?: EditorTextStyle;
     paragraph?: EditorTextStyle;
+    blockquote?: EditorBlockquoteTheme;
     headings?: EditorHeadingTheme;
     list?: EditorListTheme;
     horizontalRule?: EditorHorizontalRuleTheme;
@@ -97,34 +87,4 @@ export interface EditorTheme {
     borderRadius?: number;
     contentInsets?: EditorContentInsets;
 }
-
-function stripUndefined(value: unknown): unknown {
-    if (Array.isArray(value)) {
-        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);
-        if (entries.length === 0) {
-            return undefined;
-        }
-        return Object.fromEntries(entries);
-    }
-
-    if (typeof value === 'number' && !Number.isFinite(value)) {
-        return undefined;
-    }
-
-    return value;
-}
-
-export function serializeEditorTheme(theme?: EditorTheme): string | undefined {
-    if (!theme) return undefined;
-    const cleaned = stripUndefined(theme);
-    if (!cleaned || typeof cleaned !== 'object') return undefined;
-    return JSON.stringify(cleaned);
-}
+export declare function serializeEditorTheme(theme?: EditorTheme): string | undefined;

package/dist/EditorTheme.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.serializeEditorTheme = serializeEditorTheme;
+function stripUndefined(value) {
+    if (Array.isArray(value)) {
+        return value.map((item) => stripUndefined(item)).filter((item) => item !== undefined);
+    }
+    if (value != null && typeof value === 'object') {
+        const entries = Object.entries(value)
+            .map(([key, entryValue]) => [key, stripUndefined(entryValue)])
+            .filter(([, entryValue]) => entryValue !== undefined);
+        if (entries.length === 0) {
+            return undefined;
+        }
+        return Object.fromEntries(entries);
+    }
+    if (typeof value === 'number' && !Number.isFinite(value)) {
+        return undefined;
+    }
+    return value;
+}
+function serializeEditorTheme(theme) {
+    if (!theme)
+        return undefined;
+    const cleaned = stripUndefined(theme);
+    if (!cleaned || typeof cleaned !== 'object')
+        return undefined;
+    return JSON.stringify(cleaned);
+}

package/dist/EditorToolbar.d.ts

@@ -0,0 +1,129 @@
+import type { ActiveState, HistoryState } from './NativeEditorBridge';
+import type { EditorToolbarTheme } from './EditorTheme';
+export type EditorToolbarListType = 'bulletList' | 'orderedList';
+export type EditorToolbarCommand = 'indentList' | 'outdentList' | 'undo' | 'redo';
+export type EditorToolbarDefaultIconId = 'bold' | 'italic' | 'underline' | 'strike' | 'link' | 'image' | 'blockquote' | 'bulletList' | 'orderedList' | 'indentList' | 'outdentList' | 'lineBreak' | 'horizontalRule' | 'undo' | 'redo';
+export interface EditorToolbarSFSymbolIcon {
+    type: 'sfSymbol';
+    name: string;
+}
+export interface EditorToolbarMaterialIcon {
+    type: 'material';
+    name: string;
+}
+export type EditorToolbarIcon = {
+    type: 'default';
+    id: EditorToolbarDefaultIconId;
+} | {
+    type: 'glyph';
+    text: string;
+} | {
+    type: 'platform';
+    ios?: EditorToolbarSFSymbolIcon;
+    android?: EditorToolbarMaterialIcon;
+    fallbackText?: string;
+};
+export type EditorToolbarItem = {
+    type: 'mark';
+    mark: string;
+    label: string;
+    icon: EditorToolbarIcon;
+    key?: string;
+} | {
+    type: 'link';
+    label: string;
+    icon: EditorToolbarIcon;
+    key?: string;
+} | {
+    type: 'image';
+    label: string;
+    icon: EditorToolbarIcon;
+    key?: string;
+} | {
+    type: 'blockquote';
+    label: string;
+    icon: EditorToolbarIcon;
+    key?: string;
+} | {
+    type: 'list';
+    listType: EditorToolbarListType;
+    label: string;
+    icon: EditorToolbarIcon;
+    key?: string;
+} | {
+    type: 'command';
+    command: EditorToolbarCommand;
+    label: string;
+    icon: EditorToolbarIcon;
+    key?: string;
+} | {
+    type: 'node';
+    nodeType: string;
+    label: string;
+    icon: EditorToolbarIcon;
+    key?: string;
+} | {
+    type: 'separator';
+    key?: string;
+} | {
+    type: 'action';
+    key: string;
+    label: string;
+    icon: EditorToolbarIcon;
+    isActive?: boolean;
+    isDisabled?: boolean;
+};
+export declare const DEFAULT_EDITOR_TOOLBAR_ITEMS: readonly EditorToolbarItem[];
+export interface EditorToolbarProps {
+    /** Currently active marks and nodes from the Rust engine. */
+    activeState: ActiveState;
+    /** Current undo/redo availability. */
+    historyState: HistoryState;
+    /** Toggle bold mark. */
+    onToggleBold: () => void;
+    /** Toggle italic mark. */
+    onToggleItalic: () => void;
+    /** Toggle underline mark. */
+    onToggleUnderline: () => void;
+    /** Toggle strikethrough mark. */
+    onToggleStrike: () => void;
+    /** Toggle bullet list. */
+    onToggleBulletList?: () => void;
+    /** Toggle blockquote wrapping. */
+    onToggleBlockquote?: () => void;
+    /** Toggle ordered list. */
+    onToggleOrderedList?: () => void;
+    /** Indent the current list item. */
+    onIndentList?: () => void;
+    /** Outdent the current list item. */
+    onOutdentList?: () => void;
+    /** Insert horizontal rule. */
+    onInsertHorizontalRule?: () => void;
+    /** Insert inline hard break. */
+    onInsertLineBreak?: () => void;
+    /** Undo the last operation. */
+    onUndo: () => void;
+    /** Redo the last undone operation. */
+    onRedo: () => void;
+    /** Generic mark toggle handler used by configurable mark buttons. */
+    onToggleMark?: (mark: string) => void;
+    /** Generic list toggle handler used by configurable list buttons. */
+    onToggleListType?: (listType: EditorToolbarListType) => void;
+    /** Generic node insertion handler used by configurable node buttons. */
+    onInsertNodeType?: (nodeType: string) => void;
+    /** Generic command handler used by configurable command buttons. */
+    onRunCommand?: (command: EditorToolbarCommand) => void;
+    /** Generic action handler for arbitrary JS-defined toolbar buttons. */
+    onToolbarAction?: (key: string) => void;
+    /** Link button handler used by first-class link toolbar items. */
+    onRequestLink?: () => void;
+    /** Image button handler used by first-class image toolbar items. */
+    onRequestImage?: () => void;
+    /** Displayed toolbar items, in order. Defaults to the built-in toolbar. */
+    toolbarItems?: readonly EditorToolbarItem[];
+    /** Optional theme overrides for toolbar chrome and button colors. */
+    theme?: EditorToolbarTheme;
+    /** Whether to render the built-in top separator line. */
+    showTopBorder?: boolean;
+}
+export declare function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic, onToggleUnderline, onToggleStrike, onToggleBulletList, onToggleBlockquote, onToggleOrderedList, onIndentList, onOutdentList, onInsertHorizontalRule, onInsertLineBreak, onUndo, onRedo, onToggleMark, onToggleListType, onInsertNodeType, onRunCommand, onToolbarAction, onRequestLink, onRequestImage, toolbarItems, theme, showTopBorder, }: EditorToolbarProps): import("react/jsx-runtime").JSX.Element;