@yorkjs/hive-ui 2.2.4 → 2.2.5

package/package.json

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

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

@@ -0,0 +1,79 @@
+@import '../../styles/mixin.styl'
+@import '../../styles/variable.styl'
+
+.rich-text-editor
+  display flex
+  flex-direction column
+  gap 15PX
+
+  :global
+    taro-textarea-core
+      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)
+
+    .delete-btn
+      position absolute
+      top -6PX
+      right -6PX
+      width 16PX
+      height 16PX
+      line-height 16PX
+      text-align center
+      border-radius 50%
+      z-index 2
+
+      .delete-icon
+        position absolute
+        top 50%
+        left 50%
+        transform translate(-50%, -50%)
+        line-height 1
+        display block
+
+    .text-block
+      padding 15PX 15PX 6PX
+
+      .editor-textarea
+        :global(.taro-textarea)
+          width 100%
+          font-size 14PX
+          line-height 1.6
+          color var(--textTitle)
+
+        &.is-align-left
+          :global(.taro-textarea)
+            text-align left !important
+        &.is-align-center
+          :global(.taro-textarea)
+            text-align center !important
+        &.is-align-right
+          :global(.taro-textarea)
+            text-align right !important
+
+      .align-toolbar
+        display flex
+        justify-content flex-end
+        align-items center
+        gap 12PX
+        margin-top 4PX
+
+        .align-btn
+          padding 4PX
+          flexHVCenter()
+
+    .image-block
+      overflow hidden
+      border-radius 10PX
+
+      .image
+        display block
+        width 100%
+        height auto

package/src/components/RichTextEditor/index.tsx

@@ -0,0 +1,159 @@
+import React, { useCallback, useMemo } from 'react'
+import { View, Textarea, Image, BaseEventOrig, ITouchEvent } from '@tarojs/components'
+
+import { useTheme } from '../../config'
+import { formatClassNames } from '../../util/function'
+import Icon from '../Icon'
+
+import styles from './index.module.styl'
+
+/** 文本对齐方式 */
+export type RichTextAlign = 'left' | 'center' | 'right'
+
+export type RichTextBlockType = 'text' | 'image'
+
+interface RichTextBlockBase {
+  /** 可选唯一标识 ，便于后续排序等扩展；未传时用下标 */
+  id?: string
+}
+
+/** 文本块 */
+export interface RichTextTextBlock extends RichTextBlockBase {
+  type: 'text'
+  /** 文本内容 */
+  content: string
+  /** 对齐方式，默认 left */
+  align?: RichTextAlign
+  placeholder?: string
+}
+
+/** 图片块 */
+export interface RichTextImageBlock extends RichTextBlockBase {
+  type: 'image'
+  /** 图片地址 */
+  url: string
+}
+
+export type RichTextBlock = RichTextTextBlock | RichTextImageBlock
+
+export interface RichTextEditorProps {
+  /** 块列表（受控） */
+  value?: RichTextBlock[]
+  /** 内容变更 */
+  onChange?: (value: RichTextBlock[]) => void
+  /** 文本占位符 */
+  placeholder?: string
+  /** 自定义类名 */
+  className?: string
+}
+
+const ALIGN_OPTIONS: RichTextAlign[] = ['left', 'center', 'right']
+
+const RichTextEditor: React.FC<RichTextEditorProps> = (props) => {
+  const {
+    value = [],
+    onChange,
+    placeholder = '请输入内容',
+    className,
+  } = props
+
+  const { themeSelect } = useTheme()
+
+  const deleteBtnStyle = useMemo(() => ({
+    backgroundColor: themeSelect('rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.5)'),
+  }), [themeSelect])
+
+  const updateBlock = useCallback((index: number, patch: Partial<RichTextBlock>) => {
+    onChange?.(
+      value.map((block, i) => (i === index ? { ...block, ...patch } as RichTextBlock : block))
+    )
+  }, [value, onChange])
+
+  const handleDelete = useCallback((e: ITouchEvent, index: number) => {
+    e.stopPropagation()
+    onChange?.(value.filter((_, i) => i !== index))
+  }, [value, onChange])
+
+  const handleTextChange = useCallback((
+    index: number,
+    e: BaseEventOrig<{ value: string }>
+  ) => {
+    updateBlock(index, { content: e.detail.value })
+  }, [updateBlock])
+
+  const handleAlignChange = useCallback((index: number, align: RichTextAlign) => {
+    updateBlock(index, { align })
+  }, [updateBlock])
+
+  return (
+    <View className={formatClassNames(styles['rich-text-editor'], className)}>
+      {value.map((block, index) => (
+        <View 
+          key={block.id ?? index} 
+          className={styles['block']}
+        >
+          <View
+            className={styles['delete-btn']}
+            style={deleteBtnStyle}
+            onClick={(e) => handleDelete(e, index)}
+          >
+            <Icon
+              name='close'
+              size={10}
+              color="var(--containerCard)"
+              className={styles['delete-icon']}
+            />
+          </View>
+
+          {
+            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['align-toolbar']}>
+                  {ALIGN_OPTIONS.map((align) => {
+                    const active = (block.align || 'left') === align
+                    return (
+                      <View
+                        key={align}
+                        className={styles['align-btn']}
+                        onClick={() => handleAlignChange(index, align)}
+                      >
+                        <Icon
+                          name={`align-${align}`}
+                          size={16}
+                          color={active ? 'var(--textTitle)' : 'var(--textMuted)'}
+                        />
+                      </View>
+                    )
+                  })}
+                </View>
+              </View>
+            ) 
+            : (
+              <View className={styles['image-block']}>
+                <Image
+                  className={styles['image']}
+                  src={block.url}
+                  mode='widthFix'
+                />
+              </View>
+            )
+          }
+        </View>
+      ))}
+    </View>
+  )
+}
+
+export default React.memo(RichTextEditor)

package/src/index.ts

@@ -24,4 +24,14 @@ export {
   default as Table,
   type TableProps,
   type TableColumn,
-} from './components/Table'
+} from './components/Table'
+
+export {
+  default as RichTextEditor,
+  type RichTextEditorProps,
+  type RichTextBlock,
+  type RichTextTextBlock,
+  type RichTextImageBlock,
+  type RichTextAlign,
+  type RichTextBlockType,
+} from './components/RichTextEditor'