Swalekh Portal Integration Documentation for Lexical

Overview

Swalekh Portal is designed to enhance user input experience by providing seamless transliteration and typing in various languages. This documentation outlines how to integrate Swalekh using React+Lexical, allowing users to type in their preferred language using phonetic input.

Installation

Prerequisites

Before you begin, ensure you have the following:

A valid Validation Key. This key is essential for initializing Swalekh.
A React+Lexical application set up.

Step 1: Include Swalekh Script

In your index.html file, include the Swalekh script to make it available across your application.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>lexical</title>
    <script src="https://cdn.jsdelivr.net/npm/swalekh-sdk@3.0.1/swalekh.js" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Step 2: Initialize Swalekh

In your specific page (e.g., Editor.js), you will initialize Swalekh using your validation key. Below is an example of how to do this:

import { $getRoot, $getSelection } from 'lexical';
import { useEffect } from 'react';
 
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
 
const theme = {
    // Theme styling goes here
    // ...
}
 
// When the editor changes, you can get notified via the
// LexicalOnChangePlugin!
function onChange(editorState) {
    editorState.read(() => {
        // Read the contents of the EditorState here.
        const root = $getRoot();
        const selection = $getSelection();
 
        console.log(root, selection);
    });
}
 
// Lexical React plugins are React components, which makes them
// highly composable. Furthermore, you can lazy load plugins if
// desired, so you don't pay the cost for plugins until you
// actually use them.
function MyCustomAutoFocusPlugin() {
    const [editor] = useLexicalComposerContext();
 
    useEffect(() => {
        // Focus the editor when the effect fires!
        editor.focus();
    }, [editor]);
 
    return null;
}
 
// Catch any errors that occur during Lexical updates and log them
// or throw them as needed. If you don't throw them, Lexical will
// try to recover gracefully without losing user data.
function onError(error) {
    console.error(error);
}
 
export default function Editor() {
    const initialConfig = {
        namespace: 'MyEditor',
        theme,
        onError,
    };
 
 
    const loadSwalekh = async () => {
        await window.initSwalekh({
            validationKey:"YOUR-VALIDATION-KEY",
            optional: {
                theme: "light",
                dictionaryEnabled: false
            },
            creds: {
                identifier: ["#editor"],
                lang: 'hi',
                mode: 'phonetic', //mode can be phonetic or keyboard
                modeToggle: true,
                langToggle: true,
            }
        });
 
    }
 
    useEffect(() => {
        loadSwalekh();
    },[]);
 
 
    return (
        <LexicalComposer initialConfig={initialConfig}>
            <PlainTextPlugin
                contentEditable={
                    <ContentEditable
                        id="editor"
                        aria-placeholder={'Enter some text...'}
                        placeholder={<div>Enter some text...</div>}
                    />
                }
                ErrorBoundary={LexicalErrorBoundary}
            />
            <OnChangePlugin onChange={onChange} />
            <HistoryPlugin />
            <MyCustomAutoFocusPlugin />
        </LexicalComposer>
    );
}

Adjust the parameters in loadSwalekh to match your requirements, such as changing the lang parameter for different languages or modifying the theme.

Troubleshooting

Validation Key Issues: Ensure you are using a valid and active validation key.
Script Not Loading: Verify that the script URL is correct and accessible.
Textarea Not Found: Ensure that the querySel matches the textarea element in your HTML.

Conclusion

By following the steps outlined in this documentation, you can successfully integrate Swalekh into your React.js + Lexical application, allowing users to input text in various languages using phonetic transliteration. For further assistance, please refer to the Swalekh API Documentation or contact our support team.

Next JS Custom Endpoint