// hooks/global_utils.js

// @ts-check

/**
 * Check if a parameter is empty.
 * @param {string | null | undefined} param - param to check
 * @param {any} default_value - value to return if param is empty
 * @returns {any}
 */
function isParamEmpty(param, default_value) {
    if (param === "" || param === undefined || param === null) {
      return default_value;
    }
    return param;
  }

  module.exports = {
    isParamEmpty,
  };

// index.js

       * @typedef {Object} GlobalUtils
       * @property {(param: string | null | undefined, default_value: any) => any} isParamEmpty - Checks if a parameter is empty and returns a default value.
       */

      /** @type {GlobalUtils} */
      const { isParamEmpty } = require(`${__hooks}/global_utils.js`);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFile = e.target.files?.[0];
    if (!selectedFile) return;

    // https://developer.mozilla.org/en-US/docs/Web/API/FileReader
    // The FileReader API is used to read the contents of a Blob or File.
    // It makes it possible to read the contents of a file in JavaScript.
    const reader = new FileReader();

    // The onload event is fired when the file has been read successfully.
    // The event handler is passed the result of the file read as an argument.
    // The result is an ArrayBuffer which is a typed array of integers.
    reader.onload = (e) => {
      if (e.target?.result instanceof ArrayBuffer) {
        setFile(e.target.result);
      }
    };

    // The onerror event is fired when there is an error reading the file.
    // The event handler is passed the error as an argument.
    reader.onerror = (e) => {
      console.error("Error reading file:", e);
    };

    // The onabort event is fired when the file read has been aborted.
    // The event handler is passed no arguments.
    reader.onabort = () => {
      console.log("File reading aborted");
    };

    // Start the file read by calling the readAsArrayBuffer method.
    // This method takes a Blob or File as an argument.
    reader.readAsArrayBuffer(selectedFile);
  };

  return (
    <div className="flex h-full w-full flex-col items-center justify-center">
      <input
        onChange={handleFileChange}
        type="file"
        // limits files that will appear in the file explorer when picking to .dcx
        accept=".docx"
        // tailwind + daisyui classes for file inputs
        className="file-input w-full max-w-xs"
      />
</div>)

// parse the docx using mammoth and convert to json 
import { convertToHtml } from "mammoth";
// below library does not ship types 
//  learn about how to do typescipt module declarations for it
//  https://tigawanna-portfolio.vercel.app/lessons/zvkw94okeaegslk
import HtmlTableToJson from "html-table-to-json";



export async function handleConvert(file: ArrayBuffer | null) {
    if (file) {
      try {
        const options = { };
        const result = await convertToHtml({ arrayBuffer: file }, options);
        const tableAsJson = HtmlTableToJson.parse(result.value)

        return {html: result.value, tableJson: tableAsJson._results};
      } catch (error) {
        console.error('Error converting file:', error);
        return
      }
    } else {
      console.error("File not found");
      return
    }
  };

//custom.d.ts


declare module "html-table-to-json" {

  export default class HtmlTableToJson {

    constructor(html: string);

    static parse(html: string): {
        _results: Record<string, string>[];
        _headers: string[];
        _count: null;
        _firstRowUsedAsHeaders: boolean;
    };

    getResults(): any;

  }

}

• a short cut :keybindings.json

  {
    "key": "ctrl+o",
    "command": "editor.action.sourceAction",
    "args": {
      "kind": "source.addMissingImports",
      "apply": "first"
    }
  },

• automatically on save : settings.json

  "editor.codeActionsOnSave": { "source.addMissingImports": "always" },

      <div className="grid w-full items-center justify-center">
        <div className="col-start-1 row-start-1">
          <img
            height={200}
            width={200}
            src={"https://picsum.photos/id/62/200/200"}
            className="object-cover"
          />
        </div>
      <div className="col-start-1 row-start-1 text-center font-bold text-2xl">Text on image</div>
      </div>

const error = mutation?.error as ClientResponseError;
const pbError = error?.data?.data as Record<string, {message: string,code:string}>

useEffect(() => {
    pbError&&Object?.entries(pbError)?.forEach(([key, value]) => {
      form.setFieldMeta(key as any,(prev)=>{
        return {...prev, errorMap:{
          onChange:value?.message
        }}
      });
    });
}, [pbError]);

Copied from a tanstack form discussion 👇