Forums

I want to integrate iink with my next.js project

My app is using typescript actually.

"use client"
import { useEffect, useRef } from "react";
import * as iink from "iink-js"
import Script from "next/script";
const MathInput = () => {
  const editorRef = useRef<HTMLDivElement>(null)
  const editorStyle = {
    'minWidth': '100px',
    'minHeight': '100px',
    'width': '100vw',
    'height': 'calc(100vh - 190px)',
    'touchAction': 'none',
  };

  useEffect(() => {
    let editor: any = editorRef.current;
    editor = iink.register(editorRef.current, {
      recognitionParams: {
        type: 'TEXT',
        protocol: 'WEBSOCKET',
        server: {
          applicationKey: 'f',
          hmacKey: 'f'
        },
        iink: {
          math: {
            mimeTypes: ['application/x-latex', 'application/vnd.myscript.jiix', 'application/mathml+xml']
          },
          export: {
            jiix: {
              strokes: true
            }
          }
        }
      }
    });
    window.addEventListener('resize', () => {
      editor.resize()
    });

    return () => {
      window.removeEventListener('resize', () => { editor.resize() });
      editor.close();
    }
  }, []);
  function convert() {
    const Ed: any = editorRef.current
    Ed.editor.convert()
  }
  return <>
    <header className="p-4 bg-neutral-100">
      <button className="bg-green-500 text-white px-3 py-2 ronded-lg" onClick={convert} >Convert</button>
    </header>
    <div style={editorStyle} ref={editorRef} touch-action="none">
    </div>
  </>


}

export default MathInput

 This is my full code

but It's not work as I expected and my custom convert button doesn't work either.

If I change type from 'TEXT' to 'MATH', It doesn't work either.

Your official Github provides react example only.

So where can i get the proper support for next.js project?

Sorry for my bad English.

Thx.