@codeleap/web 3.21.2 → 3.21.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.21.2",
+  "version": "3.21.3",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",

package/src/components/TextEditor/index.tsx

@@ -1,9 +1,9 @@
-import { useCallback, useDefaultComponentStyle } from '@codeleap/common'
+import React from 'react'
+import { onUpdate, useCallback, useDefaultComponentStyle, useState, useValidate } from '@codeleap/common'
 import { BubbleMenu, FloatingMenu, EditorContent } from '@tiptap/react'
-import { FileInput, View } from '../components'
+import { FileInput, Text, View } from '../components'
 import { TextEditorProps } from './types'
 import { TextEditorPresets } from './styles'
-
 export * from './styles'
 export * from './types'
 
@@ -19,13 +19,43 @@ export const TextEditor = (props: TextEditorProps) => {
     floatingMenuProps,
     toolbarComponent,
     fileInputRef,
+    _error,
+    validate,
   } = props
+
+  const [_isFocused, setIsFocused] = useState(false)
+  const validation = useValidate(editor?.getText() ?? '', validate)
+
+  const hasError = !validation.isValid || _error
+  const errorMessage = validation.message || _error
+  const isDisabled = !editor?.isEditable ?? null
+
   const variantStyles = useDefaultComponentStyle<'u:TextEditor', typeof TextEditorPresets>('u:TextEditor', {
     variants,
     styles,
     responsiveVariants,
   })
 
+  const handleBlur = React.useCallback(() => {
+    validation?.onInputBlurred()
+    setIsFocused(false)
+  }, [validation?.onInputBlurred])
+
+  const handleFocus = React.useCallback(() => {
+    validation?.onInputFocused()
+    setIsFocused(true)
+  }, [validation?.onInputFocused])
+
+  onUpdate(() => {
+    editor?.on('blur', handleBlur)
+    editor?.on('focus', handleFocus)
+
+    return () => {
+      editor?.off('blur', handleBlur)
+      editor?.off('focus', handleFocus)
+    }
+  }, [editor, handleBlur, handleFocus])
+
   const _BubbleMenu = useCallback(() => {
     return (
       <BubbleMenu css={[variantStyles.bubbleMenu]} {...bubbleMenuProps} editor={editor}>
@@ -46,14 +76,30 @@ export const TextEditor = (props: TextEditorProps) => {
     )
   }, [editor])
 
+  const editorStyles = [
+    variantStyles.editor,
+    hasError && variantStyles['editor:error'],
+    isDisabled && variantStyles['editor:disabled'],
+  ]
+
   if (!editor) return null
   return (
-    <View style={{ ...variantStyles.wrapper, ...style }}>
+    <View
+      css={[
+        variantStyles.wrapper,
+        hasError && variantStyles['wrapper:error'],
+        {
+          '.tiptap': editorStyles,
+        },
+        style,
+      ]}
+    >
       {toolbarComponent}
       {children}
-      <_BubbleMenu/>
-      <_FloatingMenu/>
-      <EditorContent editor={editor}/>
+      <_BubbleMenu />
+      <_FloatingMenu />
+      <EditorContent editor={editor} />
+      {hasError ? <Text text={errorMessage} css={variantStyles['errorMessage:error']} /> : null}
       <FileInput
         ref={fileInputRef}
       />

package/src/components/TextEditor/styles.ts

@@ -1,7 +1,12 @@
 import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 
-export type TextEditorComposition = 'wrapper' | 'floatingMenu' | 'bubbleMenu' | 'bubbleMenuInnerWrapper' | 'floatingMenuInnerWrapper'
+export type TextEditorStates = 'error' | 'disabled'
+export type TextEditorParts = 'wrapper' | 'editor' | 'floatingMenu' | 'bubbleMenu' | 'bubbleMenuInnerWrapper' | 'floatingMenuInnerWrapper' | 'errorMessage'
+
+export type TextEditorComposition = `${TextEditorParts}:${TextEditorStates}` | TextEditorParts
 
 const createTextEditorStyle = createDefaultVariantFactory<TextEditorComposition>()
 
-export const TextEditorPresets = includePresets((styles) => createTextEditorStyle(() => ({ wrapper: styles })))
+export const TextEditorPresets = includePresets((styles) => createTextEditorStyle(() => ({
+  wrapper: styles,
+})))

package/src/components/TextEditor/types.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react'
-import { ComponentVariants, StylesOf } from '@codeleap/common'
+import { ComponentVariants, FormTypes, StylesOf, yup } from '@codeleap/common'
 import { BubbleMenuProps, Editor, FloatingMenuProps } from '@tiptap/react'
 import { FileInputRef } from '../FileInput'
 import { TextEditorComposition, TextEditorPresets } from './styles'
@@ -8,8 +8,10 @@ export type TextEditorProps = React.PropsWithChildren<{
   editor: Editor
   styles?: StylesOf<TextEditorComposition>
   style?: React.CSSProperties
-  bubbleMenuProps?: BubbleMenuProps & {renderContent: React.ReactNode}
-  floatingMenuProps?: FloatingMenuProps & {renderContent: React.ReactNode}
+  bubbleMenuProps?: BubbleMenuProps & { renderContent: React.ReactNode }
+  floatingMenuProps?: FloatingMenuProps & { renderContent: React.ReactNode }
   toolbarComponent?: JSX.Element
   fileInputRef?: RefObject<FileInputRef>
+  _error?: boolean
+  validate?: FormTypes.ValidatorWithoutForm<string> | yup.SchemaOf<string>
 } & ComponentVariants<typeof TextEditorPresets>>