@webority/mobile-ui 0.89.0 → 0.90.0

package/lib/commonjs/components/RichTextEditor/RichTextEditor.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.RichTextEditor=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_index3=require("../Skeleton/index.js"),_markdownActions=require("./markdownActions.js"),_jsxRuntime=require("react/jsx-runtime");const ACTION_META={bold:{glyph:"B",label:"Bold"},italic:{glyph:"I",label:"Italic"},strikethrough:{glyph:"S",label:"Strikethrough"},code:{glyph:"</>",label:"Inline code"},link:{glyph:"link",label:"Link"},heading1:{glyph:"H1",label:"Heading 1"},heading2:{glyph:"H2",label:"Heading 2"},bulletList:{glyph:"•",label:"Bulleted list"},numberedList:{glyph:"1.",label:"Numbered list"},quote:{glyph:">",label:"Quote"}},DEFAULT_ACTIONS=["bold","italic","strikethrough","code","link","heading1","heading2","bulletList","numberedList","quote"],DEFAULT_MIN_HEIGHT=160,RichTextEditor=exports.RichTextEditor=(0,_react.forwardRef)((e,t)=>{const{value:i,onChangeText:o,placeholder:l,actions:s=DEFAULT_ACTIONS,disabled:r=!1,loading:n=!1,minHeight:a=DEFAULT_MIN_HEIGHT,autoFocus:c=!1,accessibilityLabel:d,haptic:u,style:h,toolbarStyle:x,inputStyle:b,testID:_}=e,g=(0,_index.useTheme)(),m=(0,_react.useMemo)(()=>buildStyles(g),[g]),p=i??"",[y,j]=(0,_react.useState)({start:0,end:0}),[T,S]=(0,_react.useState)(!1),[k,R]=(0,_react.useState)(null),v=(0,_react.useCallback)(e=>{j(e.nativeEvent.selection),R(null)},[]),I=(0,_react.useCallback)(e=>{R(null),o?.(e)},[o]),C=(0,_react.useCallback)(e=>{if(r)return;const t=(0,_index2.resolveHaptic)(u,"selection");t&&(0,_index2.triggerHaptic)(t);const i=(0,_markdownActions.applyMarkdownAction)({text:p,selection:(0,_markdownActions.normalizeSelection)(y,p.length)},e);j(i.selection),R(i.selection),o?.(i.text)},[r,u,o,y,p]);return n?(0,_jsxRuntime.jsx)(RichTextEditorSkeleton,{actionCount:s.length,minHeight:a,style:h,testID:_}):(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:_,style:[m.container,{borderColor:T?g.colors["focus-ring"]:g.colors.border,opacity:r?.55:1},h],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[m.toolbar,x],children:s.map(e=>(0,_jsxRuntime.jsx)(ToolbarButton,{action:e,disabled:r,onPress:C,styles:m,theme:g,testID:_?`${_}-${e}`:void 0},e))}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:t,value:p,onChangeText:I,onSelectionChange:v,onFocus:()=>S(!0),onBlur:()=>S(!1),selection:k??void 0,editable:!r,autoFocus:c,multiline:!0,textAlignVertical:"top",placeholder:l,placeholderTextColor:g.colors["text-subtle"],accessibilityLabel:d,style:[m.input,{minHeight:a},b],testID:_?`${_}-input`:void 0})]})});RichTextEditor.displayName="RichTextEditor";const ToolbarButton=({action:e,disabled:t,onPress:i,styles:o,theme:l,testID:s})=>{const r=ACTION_META[e],n={color:t?l.colors["text-disabled"]:l.colors["text-body"]};return"bold"===e&&(n.fontWeight=l.weight.bold),"italic"===e&&(n.fontStyle="italic"),"strikethrough"===e&&(n.textDecorationLine="line-through"),(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>i(e),disabled:t,accessibilityRole:"button",accessibilityLabel:r.label,accessibilityState:{disabled:t},"aria-disabled":t,hitSlop:4,testID:s,style:({pressed:e})=>[o.button,{backgroundColor:e?l.colors["surface-pressed"]:l.colors["bg-subtle"]}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{allowFontScaling:!1,style:[o.buttonLabel,n],children:r.glyph})})};ToolbarButton.displayName="RichTextEditorToolbarButton";const RichTextEditorSkeleton=({actionCount:e,minHeight:t,style:i,testID:o})=>{const l=(0,_index.useTheme)(),s=(0,_react.useMemo)(()=>buildStyles(l),[l]),r=Array.from({length:Math.max(1,e)},(e,t)=>t);return(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:o,style:[s.container,i],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:s.toolbar,children:r.map(e=>(0,_jsxRuntime.jsx)(_index3.Skeleton,{width:34,height:30,radius:"sm"},e))}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[s.skeletonBody,{minHeight:t}],children:[(0,_jsxRuntime.jsx)(_index3.Skeleton,{shape:"text",width:"94%",height:14}),(0,_jsxRuntime.jsx)(_index3.Skeleton,{shape:"text",width:"100%",height:14}),(0,_jsxRuntime.jsx)(_index3.Skeleton,{shape:"text",width:"72%",height:14})]})]})};RichTextEditorSkeleton.displayName="RichTextEditorSkeleton";const buildStyles=e=>_reactNative.StyleSheet.create({container:{borderWidth:e.size.border,borderColor:e.colors.border,borderRadius:e.radius.md,..._corners.smoothCorners,backgroundColor:e.colors.bg,overflow:"hidden"},toolbar:{flexDirection:"row",flexWrap:"wrap",alignItems:"center",gap:e.space.xs,padding:e.space.xs,borderBottomWidth:_reactNative.StyleSheet.hairlineWidth,borderBottomColor:e.colors["border-subtle"],backgroundColor:e.colors["bg-subtle"]},button:{minWidth:34,height:30,paddingHorizontal:e.space.xs,borderRadius:e.radius.sm,..._corners.smoothCorners,alignItems:"center",justifyContent:"center"},buttonLabel:{...(0,_index.fontFor)(e,"medium"),fontSize:e.text.sm.size},input:{...(0,_index.fontFor)(e,"normal"),color:e.colors["text-body"],fontSize:e.text.base.size,lineHeight:1.5*e.text.base.size,paddingHorizontal:e.space.md,paddingVertical:e.space.sm},skeletonBody:{paddingHorizontal:e.space.md,paddingVertical:e.space.sm,gap:e.space.sm}});var _default=exports.default=RichTextEditor;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.RichTextEditor=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_index3=require("../Skeleton/index.js"),_markdownActions=require("./markdownActions.js"),_jsxRuntime=require("react/jsx-runtime");const ACTION_META={bold:{glyph:"B",label:"Bold"},italic:{glyph:"I",label:"Italic"},strikethrough:{glyph:"S",label:"Strikethrough"},code:{glyph:"</>",label:"Inline code"},link:{glyph:"link",label:"Link"},heading1:{glyph:"H1",label:"Heading 1"},heading2:{glyph:"H2",label:"Heading 2"},bulletList:{glyph:"•",label:"Bulleted list"},numberedList:{glyph:"1.",label:"Numbered list"},quote:{glyph:">",label:"Quote"}},DEFAULT_ACTIONS=["bold","italic","strikethrough","code","link","heading1","heading2","bulletList","numberedList","quote"],DEFAULT_MIN_HEIGHT=160,TOOLBAR_GLYPH_MAX_SCALE=1.5,RichTextEditor=exports.RichTextEditor=(0,_react.forwardRef)((e,t)=>{const{value:i,onChangeText:o,placeholder:l,actions:s=DEFAULT_ACTIONS,disabled:r=!1,loading:n=!1,minHeight:a=DEFAULT_MIN_HEIGHT,autoFocus:c=!1,accessibilityLabel:d,haptic:u,style:h,toolbarStyle:x,inputStyle:b,testID:_}=e,m=(0,_index.useTheme)(),g=(0,_react.useMemo)(()=>buildStyles(m),[m]),p=i??"",[y,j]=(0,_react.useState)({start:0,end:0}),[S,T]=(0,_react.useState)(!1),[R,k]=(0,_react.useState)(null),v=(0,_react.useCallback)(e=>{j(e.nativeEvent.selection),k(null)},[]),C=(0,_react.useCallback)(e=>{k(null),o?.(e)},[o]),I=(0,_react.useCallback)(e=>{if(r)return;const t=(0,_index2.resolveHaptic)(u,"selection");t&&(0,_index2.triggerHaptic)(t);const i=(0,_markdownActions.applyMarkdownAction)({text:p,selection:(0,_markdownActions.normalizeSelection)(y,p.length)},e);j(i.selection),k(i.selection),o?.(i.text)},[r,u,o,y,p]);return n?(0,_jsxRuntime.jsx)(RichTextEditorSkeleton,{actionCount:s.length,minHeight:a,style:h,testID:_}):(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:_,style:[g.container,{borderColor:S?m.colors["focus-ring"]:m.colors.border,opacity:r?.55:1},h],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[g.toolbar,x],children:s.map(e=>(0,_jsxRuntime.jsx)(ToolbarButton,{action:e,disabled:r,onPress:I,styles:g,theme:m,testID:_?`${_}-${e}`:void 0},e))}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:t,value:p,onChangeText:C,onSelectionChange:v,onFocus:()=>T(!0),onBlur:()=>T(!1),selection:R??void 0,editable:!r,autoFocus:c,multiline:!0,textAlignVertical:"top",placeholder:l,placeholderTextColor:m.colors["text-subtle"],accessibilityLabel:d,style:[g.input,{minHeight:a},b],testID:_?`${_}-input`:void 0})]})});RichTextEditor.displayName="RichTextEditor";const ToolbarButton=({action:e,disabled:t,onPress:i,styles:o,theme:l,testID:s})=>{const r=ACTION_META[e],n={color:t?l.colors["text-disabled"]:l.colors["text-body"]};return"bold"===e&&(n.fontWeight=l.weight.bold),"italic"===e&&(n.fontStyle="italic"),"strikethrough"===e&&(n.textDecorationLine="line-through"),(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>i(e),disabled:t,accessibilityRole:"button",accessibilityLabel:r.label,accessibilityState:{disabled:t},"aria-disabled":t,hitSlop:4,testID:s,style:({pressed:e})=>[o.button,{backgroundColor:e?l.colors["surface-pressed"]:l.colors["bg-subtle"]}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{maxFontSizeMultiplier:Math.min(l.settings.maxFontSizeMultiplier??1.5,1.5),style:[o.buttonLabel,n],children:r.glyph})})};ToolbarButton.displayName="RichTextEditorToolbarButton";const RichTextEditorSkeleton=({actionCount:e,minHeight:t,style:i,testID:o})=>{const l=(0,_index.useTheme)(),s=(0,_react.useMemo)(()=>buildStyles(l),[l]),r=Array.from({length:Math.max(1,e)},(e,t)=>t);return(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:o,style:[s.container,i],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:s.toolbar,children:r.map(e=>(0,_jsxRuntime.jsx)(_index3.Skeleton,{width:34,height:30,radius:"sm"},e))}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[s.skeletonBody,{minHeight:t}],children:[(0,_jsxRuntime.jsx)(_index3.Skeleton,{shape:"text",width:"94%",height:14}),(0,_jsxRuntime.jsx)(_index3.Skeleton,{shape:"text",width:"100%",height:14}),(0,_jsxRuntime.jsx)(_index3.Skeleton,{shape:"text",width:"72%",height:14})]})]})};RichTextEditorSkeleton.displayName="RichTextEditorSkeleton";const buildStyles=e=>_reactNative.StyleSheet.create({container:{borderWidth:e.size.border,borderColor:e.colors.border,borderRadius:e.radius.md,..._corners.smoothCorners,backgroundColor:e.colors.bg,overflow:"hidden"},toolbar:{flexDirection:"row",flexWrap:"wrap",alignItems:"center",gap:e.space.xs,padding:e.space.xs,borderBottomWidth:_reactNative.StyleSheet.hairlineWidth,borderBottomColor:e.colors["border-subtle"],backgroundColor:e.colors["bg-subtle"]},button:{minWidth:34,height:30,paddingHorizontal:e.space.xs,borderRadius:e.radius.sm,..._corners.smoothCorners,alignItems:"center",justifyContent:"center"},buttonLabel:{...(0,_index.fontFor)(e,"medium"),fontSize:e.text.sm.size},input:{...(0,_index.fontFor)(e,"normal"),color:e.colors["text-body"],fontSize:e.text.base.size,lineHeight:1.5*e.text.base.size,paddingHorizontal:e.space.md,paddingVertical:e.space.sm},skeletonBody:{paddingHorizontal:e.space.md,paddingVertical:e.space.sm,gap:e.space.sm}});var _default=exports.default=RichTextEditor;

package/lib/module/components/RichTextEditor/RichTextEditor.js

@@ -1 +1 @@
-"use strict";import{forwardRef,useCallback,useMemo,useState}from"react";import{Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{Skeleton}from"../Skeleton/index.js";import{applyMarkdownAction,normalizeSelection}from"./markdownActions.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const ACTION_META={bold:{glyph:"B",label:"Bold"},italic:{glyph:"I",label:"Italic"},strikethrough:{glyph:"S",label:"Strikethrough"},code:{glyph:"</>",label:"Inline code"},link:{glyph:"link",label:"Link"},heading1:{glyph:"H1",label:"Heading 1"},heading2:{glyph:"H2",label:"Heading 2"},bulletList:{glyph:"•",label:"Bulleted list"},numberedList:{glyph:"1.",label:"Numbered list"},quote:{glyph:">",label:"Quote"}},DEFAULT_ACTIONS=["bold","italic","strikethrough","code","link","heading1","heading2","bulletList","numberedList","quote"],DEFAULT_MIN_HEIGHT=160;export const RichTextEditor=forwardRef((e,t)=>{const{value:o,onChangeText:l,placeholder:i,actions:s=DEFAULT_ACTIONS,disabled:r=!1,loading:n=!1,minHeight:a=DEFAULT_MIN_HEIGHT,autoFocus:d=!1,accessibilityLabel:c,haptic:h,style:b,toolbarStyle:u,inputStyle:p,testID:g}=e,m=useTheme(),x=useMemo(()=>buildStyles(m),[m]),y=o??"",[S,T]=useState({start:0,end:0}),[k,f]=useState(!1),[j,C]=useState(null),I=useCallback(e=>{T(e.nativeEvent.selection),C(null)},[]),_=useCallback(e=>{C(null),l?.(e)},[l]),H=useCallback(e=>{if(r)return;const t=resolveHaptic(h,"selection");t&&triggerHaptic(t);const o=applyMarkdownAction({text:y,selection:normalizeSelection(S,y.length)},e);T(o.selection),C(o.selection),l?.(o.text)},[r,h,l,S,y]);return n?_jsx(RichTextEditorSkeleton,{actionCount:s.length,minHeight:a,style:b,testID:g}):_jsxs(View,{testID:g,style:[x.container,{borderColor:k?m.colors["focus-ring"]:m.colors.border,opacity:r?.55:1},b],children:[_jsx(View,{style:[x.toolbar,u],children:s.map(e=>_jsx(ToolbarButton,{action:e,disabled:r,onPress:H,styles:x,theme:m,testID:g?`${g}-${e}`:void 0},e))}),_jsx(TextInput,{ref:t,value:y,onChangeText:_,onSelectionChange:I,onFocus:()=>f(!0),onBlur:()=>f(!1),selection:j??void 0,editable:!r,autoFocus:d,multiline:!0,textAlignVertical:"top",placeholder:i,placeholderTextColor:m.colors["text-subtle"],accessibilityLabel:c,style:[x.input,{minHeight:a},p],testID:g?`${g}-input`:void 0})]})});RichTextEditor.displayName="RichTextEditor";const ToolbarButton=({action:e,disabled:t,onPress:o,styles:l,theme:i,testID:s})=>{const r=ACTION_META[e],n={color:t?i.colors["text-disabled"]:i.colors["text-body"]};return"bold"===e&&(n.fontWeight=i.weight.bold),"italic"===e&&(n.fontStyle="italic"),"strikethrough"===e&&(n.textDecorationLine="line-through"),_jsx(Pressable,{onPress:()=>o(e),disabled:t,accessibilityRole:"button",accessibilityLabel:r.label,accessibilityState:{disabled:t},"aria-disabled":t,hitSlop:4,testID:s,style:({pressed:e})=>[l.button,{backgroundColor:e?i.colors["surface-pressed"]:i.colors["bg-subtle"]}],children:_jsx(Text,{allowFontScaling:!1,style:[l.buttonLabel,n],children:r.glyph})})};ToolbarButton.displayName="RichTextEditorToolbarButton";const RichTextEditorSkeleton=({actionCount:e,minHeight:t,style:o,testID:l})=>{const i=useTheme(),s=useMemo(()=>buildStyles(i),[i]),r=Array.from({length:Math.max(1,e)},(e,t)=>t);return _jsxs(View,{testID:l,style:[s.container,o],children:[_jsx(View,{style:s.toolbar,children:r.map(e=>_jsx(Skeleton,{width:34,height:30,radius:"sm"},e))}),_jsxs(View,{style:[s.skeletonBody,{minHeight:t}],children:[_jsx(Skeleton,{shape:"text",width:"94%",height:14}),_jsx(Skeleton,{shape:"text",width:"100%",height:14}),_jsx(Skeleton,{shape:"text",width:"72%",height:14})]})]})};RichTextEditorSkeleton.displayName="RichTextEditorSkeleton";const buildStyles=e=>StyleSheet.create({container:{borderWidth:e.size.border,borderColor:e.colors.border,borderRadius:e.radius.md,...smoothCorners,backgroundColor:e.colors.bg,overflow:"hidden"},toolbar:{flexDirection:"row",flexWrap:"wrap",alignItems:"center",gap:e.space.xs,padding:e.space.xs,borderBottomWidth:StyleSheet.hairlineWidth,borderBottomColor:e.colors["border-subtle"],backgroundColor:e.colors["bg-subtle"]},button:{minWidth:34,height:30,paddingHorizontal:e.space.xs,borderRadius:e.radius.sm,...smoothCorners,alignItems:"center",justifyContent:"center"},buttonLabel:{...fontFor(e,"medium"),fontSize:e.text.sm.size},input:{...fontFor(e,"normal"),color:e.colors["text-body"],fontSize:e.text.base.size,lineHeight:1.5*e.text.base.size,paddingHorizontal:e.space.md,paddingVertical:e.space.sm},skeletonBody:{paddingHorizontal:e.space.md,paddingVertical:e.space.sm,gap:e.space.sm}});export default RichTextEditor;
+"use strict";import{forwardRef,useCallback,useMemo,useState}from"react";import{Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{Skeleton}from"../Skeleton/index.js";import{applyMarkdownAction,normalizeSelection}from"./markdownActions.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const ACTION_META={bold:{glyph:"B",label:"Bold"},italic:{glyph:"I",label:"Italic"},strikethrough:{glyph:"S",label:"Strikethrough"},code:{glyph:"</>",label:"Inline code"},link:{glyph:"link",label:"Link"},heading1:{glyph:"H1",label:"Heading 1"},heading2:{glyph:"H2",label:"Heading 2"},bulletList:{glyph:"•",label:"Bulleted list"},numberedList:{glyph:"1.",label:"Numbered list"},quote:{glyph:">",label:"Quote"}},DEFAULT_ACTIONS=["bold","italic","strikethrough","code","link","heading1","heading2","bulletList","numberedList","quote"],DEFAULT_MIN_HEIGHT=160,TOOLBAR_GLYPH_MAX_SCALE=1.5;export const RichTextEditor=forwardRef((e,t)=>{const{value:o,onChangeText:l,placeholder:i,actions:s=DEFAULT_ACTIONS,disabled:r=!1,loading:n=!1,minHeight:a=DEFAULT_MIN_HEIGHT,autoFocus:d=!1,accessibilityLabel:c,haptic:h,style:u,toolbarStyle:b,inputStyle:p,testID:m}=e,g=useTheme(),x=useMemo(()=>buildStyles(g),[g]),y=o??"",[S,T]=useState({start:0,end:0}),[k,f]=useState(!1),[_,j]=useState(null),C=useCallback(e=>{T(e.nativeEvent.selection),j(null)},[]),I=useCallback(e=>{j(null),l?.(e)},[l]),H=useCallback(e=>{if(r)return;const t=resolveHaptic(h,"selection");t&&triggerHaptic(t);const o=applyMarkdownAction({text:y,selection:normalizeSelection(S,y.length)},e);T(o.selection),j(o.selection),l?.(o.text)},[r,h,l,S,y]);return n?_jsx(RichTextEditorSkeleton,{actionCount:s.length,minHeight:a,style:u,testID:m}):_jsxs(View,{testID:m,style:[x.container,{borderColor:k?g.colors["focus-ring"]:g.colors.border,opacity:r?.55:1},u],children:[_jsx(View,{style:[x.toolbar,b],children:s.map(e=>_jsx(ToolbarButton,{action:e,disabled:r,onPress:H,styles:x,theme:g,testID:m?`${m}-${e}`:void 0},e))}),_jsx(TextInput,{ref:t,value:y,onChangeText:I,onSelectionChange:C,onFocus:()=>f(!0),onBlur:()=>f(!1),selection:_??void 0,editable:!r,autoFocus:d,multiline:!0,textAlignVertical:"top",placeholder:i,placeholderTextColor:g.colors["text-subtle"],accessibilityLabel:c,style:[x.input,{minHeight:a},p],testID:m?`${m}-input`:void 0})]})});RichTextEditor.displayName="RichTextEditor";const ToolbarButton=({action:e,disabled:t,onPress:o,styles:l,theme:i,testID:s})=>{const r=ACTION_META[e],n={color:t?i.colors["text-disabled"]:i.colors["text-body"]};return"bold"===e&&(n.fontWeight=i.weight.bold),"italic"===e&&(n.fontStyle="italic"),"strikethrough"===e&&(n.textDecorationLine="line-through"),_jsx(Pressable,{onPress:()=>o(e),disabled:t,accessibilityRole:"button",accessibilityLabel:r.label,accessibilityState:{disabled:t},"aria-disabled":t,hitSlop:4,testID:s,style:({pressed:e})=>[l.button,{backgroundColor:e?i.colors["surface-pressed"]:i.colors["bg-subtle"]}],children:_jsx(Text,{maxFontSizeMultiplier:Math.min(i.settings.maxFontSizeMultiplier??1.5,1.5),style:[l.buttonLabel,n],children:r.glyph})})};ToolbarButton.displayName="RichTextEditorToolbarButton";const RichTextEditorSkeleton=({actionCount:e,minHeight:t,style:o,testID:l})=>{const i=useTheme(),s=useMemo(()=>buildStyles(i),[i]),r=Array.from({length:Math.max(1,e)},(e,t)=>t);return _jsxs(View,{testID:l,style:[s.container,o],children:[_jsx(View,{style:s.toolbar,children:r.map(e=>_jsx(Skeleton,{width:34,height:30,radius:"sm"},e))}),_jsxs(View,{style:[s.skeletonBody,{minHeight:t}],children:[_jsx(Skeleton,{shape:"text",width:"94%",height:14}),_jsx(Skeleton,{shape:"text",width:"100%",height:14}),_jsx(Skeleton,{shape:"text",width:"72%",height:14})]})]})};RichTextEditorSkeleton.displayName="RichTextEditorSkeleton";const buildStyles=e=>StyleSheet.create({container:{borderWidth:e.size.border,borderColor:e.colors.border,borderRadius:e.radius.md,...smoothCorners,backgroundColor:e.colors.bg,overflow:"hidden"},toolbar:{flexDirection:"row",flexWrap:"wrap",alignItems:"center",gap:e.space.xs,padding:e.space.xs,borderBottomWidth:StyleSheet.hairlineWidth,borderBottomColor:e.colors["border-subtle"],backgroundColor:e.colors["bg-subtle"]},button:{minWidth:34,height:30,paddingHorizontal:e.space.xs,borderRadius:e.radius.sm,...smoothCorners,alignItems:"center",justifyContent:"center"},buttonLabel:{...fontFor(e,"medium"),fontSize:e.text.sm.size},input:{...fontFor(e,"normal"),color:e.colors["text-body"],fontSize:e.text.base.size,lineHeight:1.5*e.text.base.size,paddingHorizontal:e.space.md,paddingVertical:e.space.sm},skeletonBody:{paddingHorizontal:e.space.md,paddingVertical:e.space.sm,gap:e.space.sm}});export default RichTextEditor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/mobile-ui",
-  "version": "0.89.0",
+  "version": "0.90.0",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",
@@ -83,8 +83,8 @@
     "react-native-safe-area-context": ">=5.4.0",
     "react-native-svg": ">=15.0.0",
     "react-native-worklets": ">=0.10.0",
-    "@webority/canvas-kit": "0.89.0",
-    "@webority/mobile-core": "0.89.0"
+    "@webority/canvas-kit": "0.90.0",
+    "@webority/mobile-core": "0.90.0"
   },
   "peerDependenciesMeta": {
     "@webority/canvas-kit": {
@@ -145,10 +145,10 @@
     "react-test-renderer": "19.2.8",
     "rimraf": "6.1.3",
     "typescript": "5.9.3",
-    "@webority/canvas-kit": "0.89.0",
+    "@webority/canvas-kit": "0.90.0",
     "@webority/mobile-dev": "0.0.0",
-    "@webority/mobile-core": "0.89.0",
-    "@webority/tokens": "0.89.0"
+    "@webority/tokens": "0.90.0",
+    "@webority/mobile-core": "0.90.0"
   },
   "scripts": {
     "build": "bob build && node ../mobile-dev/scripts/minify-lib.mjs",