@yorkjs/hive-ui 2.2.6 → 2.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorkjs/hive-ui",
-  "version": "2.2.6",
+  "version": "2.2.8",
   "description": "Hive UI - Taro React component library",
   "main": "src/index.ts",
   "module": "src/index.ts",

package/src/components/RichTextEditor/index.module.styl

@@ -11,13 +11,12 @@
       width 100%
       .auto-height
         height auto
-        min-height 80PX
         background-color transparent
 
   .block
     position relative
     border-radius 10PX
-    halfBorder(top right bottom left, var(--lineBorder), 10PX)
+    halfBorder(top right bottom left, var(--lineBorder), 20PX)
 
     .delete-btn
       position absolute
@@ -39,14 +38,20 @@
         display block
 
     .text-block
+      background-color var(--containerCard)
+      border-radius 10PX
       padding 15PX 15PX 6PX
 
+      .textarea-wrap
+        min-height 80PX
+
       .editor-textarea
         :global(.taro-textarea)
           width 100%
           font-size 14PX
           line-height 1.6
           color var(--textTitle)
+          overflow hidden
 
         &.is-align-left
           :global(.taro-textarea)
@@ -75,8 +80,13 @@
     .image-block
       overflow hidden
       border-radius 10PX
+      background-color var(--containerCard)
+      user-select none
 
       .image
         display block
         width 100%
         height auto
+        pointer-events none
+        user-select none
+        -webkit-user-drag none

package/src/components/RichTextEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { View, Textarea, Image, BaseEventOrig, ITouchEvent } from '@tarojs/components'
 
 import { useTheme } from '../../config'
@@ -49,6 +49,42 @@ export interface RichTextEditorProps {
 
 const ALIGN_OPTIONS: RichTextAlign[] = ['left', 'center', 'right']
 
+const getNativeTextarea = (instance: any): HTMLTextAreaElement | null => {
+  if (!instance) {
+    return null
+  }
+
+  if (instance.tagName === 'TEXTAREA') {
+    return instance
+  }
+
+  return instance.querySelector?.('textarea') || instance.textareaRef || null
+}
+
+const focusTextarea = (instance: any) => {
+  if (!instance) {
+    return
+  }
+
+  if (typeof instance.focus === 'function') {
+    instance.focus()
+    return
+  }
+
+  getNativeTextarea(instance)?.focus?.()
+}
+
+const syncTextareaAutoHeight = (instance: any) => {
+  const textarea = getNativeTextarea(instance)
+  if (!textarea) {
+    return
+  }
+
+  textarea.style.overflow = 'hidden'
+  textarea.style.height = 'auto'
+  textarea.style.height = `${textarea.scrollHeight}px`
+}
+
 const RichTextEditor: React.FC<RichTextEditorProps> = (props) => {
   const {
     value = [],
@@ -58,6 +94,8 @@ const RichTextEditor: React.FC<RichTextEditorProps> = (props) => {
   } = props
 
   const { themeSelect } = useTheme()
+  const textareaRefs = useRef<Record<number, any>>({})
+  const skipHeightSyncRef = useRef(false)
 
   const deleteBtnStyle = useMemo(() => ({
     backgroundColor: themeSelect('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)'),
@@ -78,13 +116,56 @@ const RichTextEditor: React.FC<RichTextEditorProps> = (props) => {
     index: number,
     e: BaseEventOrig<{ value: string }>
   ) => {
+    skipHeightSyncRef.current = true
     updateBlock(index, { content: e.detail.value })
+
+    const eventTarget = (e as any).target
+    const textarea = eventTarget?.tagName === 'TEXTAREA'
+      ? eventTarget
+      : textareaRefs.current[index]
+    syncTextareaAutoHeight(textarea)
+    requestAnimationFrame(() => {
+      syncTextareaAutoHeight(textareaRefs.current[index])
+    })
   }, [updateBlock])
 
   const handleAlignChange = useCallback((index: number, align: RichTextAlign) => {
     updateBlock(index, { align })
   }, [updateBlock])
 
+  const handleTextBlockClick = useCallback((index: number) => {
+    focusTextarea(textareaRefs.current[index])
+  }, [])
+
+  const handleImageDragStart = useCallback((e: React.DragEvent<HTMLImageElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }, [])
+
+  useEffect(() => {
+    if (skipHeightSyncRef.current) {
+      skipHeightSyncRef.current = false
+      return
+    }
+
+    const syncAll = () => {
+      value.forEach((block, index) => {
+        if (block.type !== 'text') {
+          return
+        }
+        syncTextareaAutoHeight(textareaRefs.current[index])
+      })
+    }
+
+    const rafId = requestAnimationFrame(syncAll)
+    const timer = setTimeout(syncAll, 0)
+
+    return () => {
+      cancelAnimationFrame(rafId)
+      clearTimeout(timer)
+    }
+  }, [value])
+
   return (
     <View className={formatClassNames(styles['rich-text-editor'], className)}>
       {value.map((block, index) => (
@@ -108,18 +189,27 @@ const RichTextEditor: React.FC<RichTextEditorProps> = (props) => {
           {
             block.type === 'text' 
             ? (
-              <View className={styles['text-block']}>
-                <Textarea
-                  className={formatClassNames(
-                    styles['editor-textarea'],
-                    styles[`is-align-${block.align || 'left'}`]
-                  )}
-                  value={block.content}
-                  placeholder={block?.placeholder || placeholder}
-                  maxlength={-1}
-                  autoHeight
-                  onInput={(e) => handleTextChange(index, e)}
-                />
+              <View
+                className={styles['text-block']}
+                onClick={() => handleTextBlockClick(index)}
+              >
+                <View className={styles['textarea-wrap']}>
+                  <Textarea
+                    ref={(node) => {
+                      textareaRefs.current[index] = node
+                    }}
+                    className={formatClassNames(
+                      styles['editor-textarea'],
+                      styles[`is-align-${block.align || 'left'}`]
+                    )}
+                    value={block.content}
+                    placeholder={block?.placeholder || placeholder}
+                    maxlength={-1}
+                    autoHeight
+                    disableDefaultPadding
+                    onInput={(e) => handleTextChange(index, e)}
+                  />
+                </View>
                 <View className={styles['align-toolbar']}>
                   {ALIGN_OPTIONS.map((align) => {
                     const active = (block.align || 'left') === align
@@ -155,6 +245,10 @@ const RichTextEditor: React.FC<RichTextEditorProps> = (props) => {
                   className={styles['image']}
                   src={block.url}
                   mode='widthFix'
+                  imgProps={{
+                    draggable: false,
+                    onDragStart: handleImageDragStart,
+                  }}
                 />
               </View>
             )