@herca/rn-kit 0.1.51 → 0.1.52

package/lib/module/TextEditor/TextEditor.js

@@ -1,26 +1,80 @@
 "use strict";
 
-import { useRef, useState, useEffect } from 'react';
-import { View, StyleSheet, Platform, KeyboardAvoidingView, TouchableOpacity, Keyboard, Dimensions, SafeAreaView } from 'react-native';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Alert, Dimensions, Keyboard, KeyboardAvoidingView, Platform, SafeAreaView, ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { WebView } from 'react-native-webview';
+import BottomSheet from "../BottomSheet/BottomSheet.js";
+import Button from "../Button/Button.js";
 import Color from "../Color/Color.js";
+import Icon from "../Icon/index.js";
+import Input from "../Input/Input.js";
 import LabelForm from "../LabelForm/LabelForm.js";
 import Typography from "../Typography/Typography.js";
-import Icon from "../Icon/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function TextEditor({
+const TextEditor = /*#__PURE__*/forwardRef(({
   label,
   hasError,
   hint,
   onChange,
-  height = 300
-}) {
+  height = 300,
+  initialValue = '',
+  placeholder = 'Tulis sesuatu di sini...',
+  maxLength,
+  onFocus,
+  onBlur,
+  inputLinkTextPlacholder = 'Link URL',
+  inputLinkUrlPlacholder = 'https://www.example.com',
+  inputLabelLinkText = 'Teks Link',
+  inputLabelLinkUrl = 'Link URL',
+  saveLinkButtonText = 'Simpan',
+  cancelLinkButtonText = 'Batal'
+}, ref) => {
   const [keyboardHeight, setKeyboardHeight] = useState(0);
   const [showToolbar, setShowToolbar] = useState(false);
+  const [activeFormats, setActiveFormats] = useState(new Set());
+  const [characterCount, setCharacterCount] = useState(0);
+  const [showLinkModal, setShowLinkModal] = useState(false);
+  const [linkText, setLinkText] = useState('');
+  const [linkUrl, setLinkUrl] = useState('');
+  const [isEditingLink, setIsEditingLink] = useState(false);
   const webviewRef = useRef(null);
+  const inputUrlRef = useRef(null);
   const handleOnChange = data => {
+    // Remove HTML tags untuk hitung karakter
+    const textOnly = data.replace(/<[^>]*>/g, '');
+    setCharacterCount(textOnly.length);
+    if (maxLength && textOnly.length > maxLength) {
+      return;
+    }
     onChange?.(data);
   };
+
+  // Expose methods via ref
+  useImperativeHandle(ref, () => ({
+    getContent: () => {
+      webviewRef.current?.postMessage('getContent');
+    },
+    setContent: html => {
+      const escapedHtml = html.replace(/`/g, '\\`').replace(/\$/g, '\\$');
+      webviewRef.current?.injectJavaScript(`
+        const editor = document.getElementById('editor');
+        editor.innerHTML = \`${escapedHtml}\`;
+        if (editor.textContent.trim()) {
+          editor.classList.remove('placeholder');
+        }
+        true;
+      `);
+    },
+    clearContent: () => {
+      webviewRef.current?.injectJavaScript(`
+        const editor = document.getElementById('editor');
+        editor.innerHTML = '';
+        editor.classList.add('placeholder');
+        window.ReactNativeWebView.postMessage('');
+        true;
+      `);
+    }
+  }));
   const htmlEditor = `
     <html>
       <head>
@@ -39,52 +93,225 @@ export default function TextEditor({
             overflow-x: hidden;
           }
           #editor {
-            min-height: ${height};
+            height: 100%;
             width: 100%;
             max-width: 100%;
-            padding: 12px;
-            font-size: 12px;
-            border: 1px solid ${Color.gray[200]};
+            font-size: 14px;
+            line-height: 1.5;
             border-radius: 6px;
             outline: none;
             transition: border 0.2s;
             overflow-wrap: break-word;
-            font-weight: 500;
+            font-weight: 400;
             word-wrap: break-word;
             word-break: break-word;
+            color: #333;
+          }
+          #editor.placeholder:empty:before {
+            content: '${placeholder}';
+            color: ${Color.gray[400]};
+            font-style: italic;
+          }
+          #editor:focus {
+            outline: none;
+          }
+          /* Style untuk list */
+          #editor ul, #editor ol {
+            margin: 8px 0;
+            padding-left: 24px;
+          }
+          #editor li {
+            margin: 4px 0;
           }
-          #editor.focused {
-            border-color: ${Color.gray[200]}
+          /* Style untuk heading */
+          #editor h1 { font-size: 24px; font-weight: bold; margin: 12px 0; }
+          #editor h2 { font-size: 20px; font-weight: bold; margin: 10px 0; }
+          #editor h3 { font-size: 16px; font-weight: bold; margin: 8px 0; }
+          /* Style untuk link */
+          #editor a {
+            color: #3b82f6;
+            text-decoration: underline;
+            cursor: pointer;
+          }
+          #editor a:hover {
+            color: #2563eb;
           }
         </style>
       </head>
       <body>
-        <div id="editor" contenteditable="true">Tulis sesuatu di sini...</div>
+        <div id="editor" contenteditable="true" class="placeholder">${initialValue}</div>
         <script>
           const editor = document.getElementById("editor");
-          
+
+          // Handle placeholder
+          if (editor.textContent.trim()) {
+            editor.classList.remove('placeholder');
+          }
+
+          editor.addEventListener("input", () => {
+            if (editor.textContent.trim()) {
+              editor.classList.remove('placeholder');
+            } else {
+              editor.classList.add('placeholder');
+            }
+            window.ReactNativeWebView.postMessage(editor.innerHTML);
+          });
+
           editor.addEventListener("focus", () => {
             editor.classList.add("focused");
+            window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'focus' }));
           });
 
           editor.addEventListener("blur", () => {
             editor.classList.remove("focused");
+            window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'blur' }));
           });
+
+          // Update active formats
+          editor.addEventListener("mouseup", updateFormats);
+          editor.addEventListener("keyup", updateFormats);
+          editor.addEventListener("click", updateFormats);
+
+          function updateFormats() {
+            const formats = [];
+            if (document.queryCommandState('bold')) formats.push('bold');
+            if (document.queryCommandState('italic')) formats.push('italic');
+            if (document.queryCommandState('underline')) formats.push('underline');
+            if (document.queryCommandState('strikeThrough')) formats.push('strikeThrough');
+
+            window.ReactNativeWebView.postMessage(JSON.stringify({
+              type: 'formats',
+              formats: formats
+            }));
+          }
+
+          function getSelectedLinkInfo() {
+            const selection = window.getSelection();
+            if (!selection || selection.rangeCount === 0) {
+              return { text: '', url: '' };
+            }
+
+            const range = selection.getRangeAt(0);
+            let linkElement = null;
+
+            // Check if selection contains or is within a link
+            if (range.startContainer.nodeType === Node.ELEMENT_NODE) {
+              linkElement = range.startContainer.querySelector('a');
+            }
+
+            // Check parent nodes for link
+            let node = range.startContainer;
+            while (node && node !== editor) {
+              if (node.nodeName === 'A') {
+                linkElement = node;
+                break;
+              }
+              node = node.parentNode;
+            }
+
+            // Check if any node in selection is a link
+            if (!linkElement && range.commonAncestorContainer) {
+              const container = range.commonAncestorContainer;
+              if (container.nodeType === Node.ELEMENT_NODE) {
+                linkElement = container.querySelector('a');
+              }
+            }
+
+            if (linkElement) {
+              return {
+                text: linkElement.textContent || '',
+                url: linkElement.href || '',
+                isExisting: true
+              };
+            }
+
+            return {
+              text: selection.toString(),
+              url: '',
+              isExisting: false
+            };
+          }
+
           const handleMessage = (command) => {
             if (command === 'getContent') {
               window.ReactNativeWebView.postMessage(editor.innerHTML);
+            } else if (command === 'getSelectedText') {
+              const linkInfo = getSelectedLinkInfo();
+              window.ReactNativeWebView.postMessage(JSON.stringify({
+                type: 'selectedText',
+                text: linkInfo.text,
+                url: linkInfo.url,
+                isExisting: linkInfo.isExisting
+              }));
+            } else if (command.startsWith('insertLink:')) {
+              const linkData = command.replace('insertLink:', '');
+              const { text, url, isExisting } = JSON.parse(linkData);
+              editor.focus();
+              const selection = window.getSelection();
+
+              if (selection && selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+
+                // If editing existing link, find and update it
+                if (isExisting) {
+                  let linkElement = null;
+                  let node = range.startContainer;
+
+                  while (node && node !== editor) {
+                    if (node.nodeName === 'A') {
+                      linkElement = node;
+                      break;
+                    }
+                    node = node.parentNode;
+                  }
+
+                  if (!linkElement && range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE) {
+                    linkElement = range.commonAncestorContainer.querySelector('a');
+                  }
+
+                  if (linkElement) {
+                    linkElement.href = url;
+                    linkElement.textContent = text;
+                    // Move cursor after link
+                    range.setStartAfter(linkElement);
+                    range.collapse(true);
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                    window.ReactNativeWebView.postMessage(editor.innerHTML);
+                    return;
+                  }
+                }
+
+                // Create new link
+                const link = document.createElement('a');
+                link.href = url;
+                link.textContent = text;
+                link.target = '_blank';
+                range.deleteContents();
+                range.insertNode(link);
+                // Add space after link
+                const space = document.createTextNode(' ');
+                link.parentNode.insertBefore(space, link.nextSibling);
+                // Move cursor after space
+                range.setStartAfter(space);
+                range.collapse(true);
+                selection.removeAllRanges();
+                selection.addRange(range);
+              }
+              window.ReactNativeWebView.postMessage(editor.innerHTML);
             } else {
               editor.focus();
-              document.execCommand(command, false, '');
+              document.execCommand(command, false, null);
+              updateFormats();
             }
           };
 
-          // ini untuk Android
+          // untuk Android
           document.addEventListener("message", (event) => {
             handleMessage(event.data);
           });
 
-          // ini untuk iOS
+          // untuk iOS
           window.addEventListener("message", (event) => {
             handleMessage(event.data);
           });
@@ -96,18 +323,147 @@ export default function TextEditor({
     if (webviewRef.current) {
       if (Platform.OS === 'ios') {
         webviewRef.current.injectJavaScript(`
-          document.execCommand('${command}', false, '');
-          true; //di ios harus biar berfunsi boldnya
-        `);
+        document.execCommand('${command}', false, null);
+        const formats = [];
+        if (document.queryCommandState('bold')) formats.push('bold');
+        if (document.queryCommandState('italic')) formats.push('italic');
+        if (document.queryCommandState('underline')) formats.push('underline');
+        if (document.queryCommandState('strikeThrough')) formats.push('strikeThrough');
+        window.ReactNativeWebView.postMessage(JSON.stringify({
+          type: 'formats',
+          formats: formats
+        }));
+        true;
+      `);
       } else {
         webviewRef.current.postMessage(command);
       }
     }
   };
+  const openLinkModal = () => {
+    // Get selected text first
+    if (webviewRef.current) {
+      webviewRef.current.postMessage('getSelectedText');
+    }
+    setShowLinkModal(true);
+    setTimeout(() => {
+      inputUrlRef.current?.focus();
+    }, 300);
+  };
+  console.log(showLinkModal);
+  const insertLink = () => {
+    if (!linkUrl.trim()) {
+      Alert.alert('Error', 'URL tidak boleh kosong');
+      return;
+    }
+    let finalUrl = linkUrl.trim();
+    // Add https:// if no protocol
+    if (!finalUrl.match(/^https?:\/\//i)) {
+      finalUrl = 'https://' + finalUrl;
+    }
+    const linkData = JSON.stringify({
+      text: linkText.trim() || finalUrl,
+      url: finalUrl,
+      isExisting: isEditingLink
+    });
+    if (webviewRef.current) {
+      if (Platform.OS === 'ios') {
+        webviewRef.current.injectJavaScript(`
+          const linkData = ${linkData};
+          const editor = document.getElementById('editor');
+          editor.focus();
+          const selection = window.getSelection();
+
+          if (selection && selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0);
+
+            // If editing existing link
+            if (linkData.isExisting) {
+              let linkElement = null;
+              let node = range.startContainer;
+
+              while (node && node !== editor) {
+                if (node.nodeName === 'A') {
+                  linkElement = node;
+                  break;
+                }
+                node = node.parentNode;
+              }
+
+              if (!linkElement && range.commonAncestorContainer.nodeType === 1) {
+                linkElement = range.commonAncestorContainer.querySelector('a');
+              }
+
+              if (linkElement) {
+                linkElement.href = linkData.url;
+                linkElement.textContent = linkData.text;
+                range.setStartAfter(linkElement);
+                range.collapse(true);
+                selection.removeAllRanges();
+                selection.addRange(range);
+                window.ReactNativeWebView.postMessage(editor.innerHTML);
+                true;
+                return;
+              }
+            }
+
+            // Create new link
+            const link = document.createElement('a');
+            link.href = linkData.url;
+            link.textContent = linkData.text;
+            link.target = '_blank';
+            range.deleteContents();
+            range.insertNode(link);
+            const space = document.createTextNode(' ');
+            link.parentNode.insertBefore(space, link.nextSibling);
+            range.setStartAfter(space);
+            range.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(range);
+          }
+          window.ReactNativeWebView.postMessage(editor.innerHTML);
+          true;
+        `);
+      } else {
+        webviewRef.current.postMessage('insertLink:' + linkData);
+      }
+    }
+    setShowLinkModal(false);
+    setLinkText('');
+    setLinkUrl('');
+    setIsEditingLink(false);
+  };
+  const closeLinkModal = () => {
+    setShowLinkModal(false);
+    setLinkText('');
+    setLinkUrl('');
+    setIsEditingLink(false);
+  };
+  const handleWebViewMessage = event => {
+    const data = event.nativeEvent.data;
+    try {
+      const parsed = JSON.parse(data);
+      if (parsed.type === 'formats') {
+        setActiveFormats(new Set(parsed.formats));
+      } else if (parsed.type === 'focus') {
+        onFocus?.();
+      } else if (parsed.type === 'blur') {
+        onBlur?.();
+      } else if (parsed.type === 'selectedText') {
+        setLinkText(parsed.text);
+        // Clean URL (remove protocol prefix for editing)
+        const cleanUrl = parsed.url.replace(/^https?:\/\//, '');
+        setLinkUrl(cleanUrl);
+        setIsEditingLink(parsed.isExisting || false);
+      }
+    } catch {
+      // Jika bukan JSON, berarti itu HTML content
+      handleOnChange(data);
+    }
+  };
   useEffect(() => {
     const showSub = Keyboard.addListener('keyboardDidShow', e => {
       setKeyboardHeight(e.endCoordinates.height - 35);
-      console.log(e.endCoordinates.height);
       setShowToolbar(true);
     });
     const hideSub = Keyboard.addListener('keyboardDidHide', () => {
@@ -119,14 +475,59 @@ export default function TextEditor({
       hideSub.remove();
     };
   }, []);
+  const gap = Platform.OS === 'ios' ? 200 : 185;
+  const isFormatActive = format => activeFormats.has(format);
+  const toolbarButtons = [{
+    command: 'bold',
+    icon: 'Bold',
+    label: 'Bold'
+  }, {
+    command: 'italic',
+    icon: 'Italic',
+    label: 'Italic'
+  }, {
+    command: 'underline',
+    icon: 'UnderLine',
+    label: 'Underline'
+  }, {
+    command: 'strikeThrough',
+    icon: 'strike-through',
+    label: 'Strike'
+  }, {
+    command: 'link',
+    icon: 'Link',
+    label: 'Link',
+    isSpecial: true
+  }, {
+    command: 'insertUnorderedList',
+    icon: 'list-un-ordered',
+    label: 'Bullet'
+  }, {
+    command: 'insertOrderedList',
+    icon: 'list-ordered',
+    label: 'Number'
+  }, {
+    command: 'justifyLeft',
+    icon: 'align-left',
+    label: 'Left'
+  }, {
+    command: 'justifyCenter',
+    icon: 'align-center',
+    label: 'Center'
+  }, {
+    command: 'justifyRight',
+    icon: 'align-right',
+    label: 'Right'
+  }];
   return /*#__PURE__*/_jsxs(View, {
     style: styles.container,
     children: [label ? /*#__PURE__*/_jsx(LabelForm, {
       title: label
     }) : null, /*#__PURE__*/_jsx(KeyboardAvoidingView, {
-      style: (styles.editorWrapper, [{
-        minHeight: height
-      }]),
+      style: [styles.editorWrapper, {
+        minHeight: height,
+        height: height
+      }],
       behavior: Platform.OS === 'ios' ? 'padding' : undefined,
       children: /*#__PURE__*/_jsx(WebView, {
         ref: webviewRef,
@@ -134,47 +535,90 @@ export default function TextEditor({
         source: {
           html: htmlEditor
         },
-        onMessage: event => {
-          handleOnChange(event.nativeEvent.data);
-        },
+        onMessage: handleWebViewMessage,
         style: styles.webview,
         javaScriptEnabled: true,
         domStorageEnabled: true,
         mixedContentMode: "always",
         allowUniversalAccessFromFileURLs: true,
-        allowFileAccess: true
+        allowFileAccess: true,
+        scrollEnabled: true
       })
-    }), hint ? /*#__PURE__*/_jsx(Typography, {
-      color: hasError ? Color.danger[500] : Color.gray[700],
-      variant: "t3",
-      weight: "medium",
-      children: hint
-    }) : null, showToolbar ? /*#__PURE__*/_jsxs(SafeAreaView, {
+    }), hint || maxLength ? /*#__PURE__*/_jsxs(View, {
+      style: styles.hintContainer,
+      children: [hint ? /*#__PURE__*/_jsx(Typography, {
+        color: hasError ? Color.danger[500] : Color.gray[700],
+        variant: "t3",
+        weight: "medium",
+        children: hint
+      }) : null, maxLength && /*#__PURE__*/_jsxs(Typography, {
+        color: characterCount > maxLength ? Color.danger[500] : Color.gray[600],
+        variant: "t3",
+        weight: "medium",
+        children: [characterCount, "/", maxLength]
+      })]
+    }) : null, showToolbar ? /*#__PURE__*/_jsx(SafeAreaView, {
       style: [styles.toolbar, {
-        top: Dimensions.get('screen').height - keyboardHeight - 200
+        top: Dimensions.get('screen').height - keyboardHeight - gap
       }],
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: () => formatText('bold'),
-        style: styles.toolButton,
-        children: /*#__PURE__*/_jsx(Icon, {
-          name: "Bold"
-        })
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: () => formatText('italic'),
-        style: styles.toolButton,
-        children: /*#__PURE__*/_jsx(Icon, {
-          name: "Italic"
-        })
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: () => formatText('underline'),
-        style: styles.toolButton,
-        children: /*#__PURE__*/_jsx(Icon, {
-          name: "UnderLine"
-        })
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: styles.toolbarContent,
+        children: toolbarButtons.map(button => /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: () => button.isSpecial ? openLinkModal() : formatText(button.command),
+          style: [styles.toolButton, isFormatActive(button.command) && styles.toolButtonActive],
+          children: /*#__PURE__*/_jsx(Icon, {
+            name: button.icon,
+            size: 20,
+            color: isFormatActive(button.command) ? '#fff' : Color.gray[900]
+          })
+        }, button.command))
+      })
+    }) : null, /*#__PURE__*/_jsxs(BottomSheet, {
+      isOpen: showLinkModal,
+      onClose: () => setShowLinkModal(false),
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.modalBody,
+        children: [/*#__PURE__*/_jsx(Input, {
+          label: inputLabelLinkText,
+          value: linkText,
+          onChangeText: setLinkText,
+          placeholder: inputLinkTextPlacholder,
+          autoCapitalize: "none"
+        }), /*#__PURE__*/_jsx(Input, {
+          ref: inputUrlRef,
+          keyboardType: "url",
+          label: inputLabelLinkUrl,
+          value: linkUrl,
+          onChangeText: setLinkUrl,
+          placeholder: inputLinkUrlPlacholder,
+          autoCapitalize: "none"
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.modalActions,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.flex1,
+          children: /*#__PURE__*/_jsx(Button, {
+            title: cancelLinkButtonText,
+            color: "primary",
+            onPress: closeLinkModal,
+            variant: "outline"
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.flex1,
+          children: /*#__PURE__*/_jsx(Button, {
+            title: saveLinkButtonText,
+            color: "primary",
+            onPress: insertLink
+          })
+        })]
       })]
-    }) : null]
+    })]
   });
-}
+});
+TextEditor.displayName = 'TextEditor';
+export default TextEditor;
 const styles = StyleSheet.create({
   container: {
     backgroundColor: '#fff',
@@ -182,28 +626,59 @@ const styles = StyleSheet.create({
     position: 'relative'
   },
   editorWrapper: {
-    flex: 1
+    flex: 1,
+    borderWidth: 1,
+    borderColor: Color.gray[200],
+    borderRadius: 8,
+    overflow: 'hidden',
+    paddingVertical: 10,
+    paddingHorizontal: 12
+  },
+  hintContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 2
   },
   toolbar: {
     flexDirection: 'row',
     borderTopWidth: 1,
     borderColor: Color.gray[200],
+    backgroundColor: '#fff',
     paddingVertical: 8,
-    paddingHorizontal: 10,
     position: 'absolute',
-    left: 0,
-    width: '100%',
+    left: -24,
+    width: Dimensions.get('screen').width,
     alignItems: 'center'
   },
+  toolbarContent: {
+    paddingHorizontal: 8,
+    gap: 4
+  },
   toolButton: {
     padding: 8,
     marginHorizontal: 4,
-    borderRadius: 6
+    borderRadius: 6,
+    minWidth: 36,
+    alignItems: 'center',
+    justifyContent: 'center'
   },
-  toolText: {
-    fontWeight: 'bold'
+  toolButtonActive: {
+    backgroundColor: Color.primary?.[1000]
   },
   webview: {
+    flex: 1,
+    backgroundColor: 'transparent'
+  },
+  modalBody: {
+    gap: 16
+  },
+  modalActions: {
+    flexDirection: 'row',
+    gap: 12,
+    marginTop: 8
+  },
+  flex1: {
     flex: 1
   }
 });