package.json

@@ -57,7 +57,6 @@
     "react-singleton-hook": "^4.0.1",
     "react-toastify": "10.0.4",
     "redux": "5.0.1",
-    "svgo": "^3.3.2",
     "tseep": "1.2.1"
   },
   "devDependencies": {
@@ -67,7 +66,6 @@
     "@types/pdfjs-dist": "^2.10.378",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
-    "@types/svgo": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",
     "@vitejs/plugin-react": "^4.2.1",
@@ -80,7 +78,6 @@
     "ts-css-modules-vite-plugin": "1.0.20",
     "typescript": "^5.2.2",
     "vite": "^5.1.4",
-    "vite-plugin-node-polyfills": "^0.22.0",
     "vite-tsconfig-paths": "4.3.2"
   },
   "lint-staged": {

src/components/MarkFormField/index.tsx

@@ -7,12 +7,13 @@ import {
   isCurrentValueLast
 } from '../../utils'
 import React, { useState } from 'react'
-import { MARK_TYPE_CONFIG } from '../getMarkComponents.tsx'
 
 interface MarkFormFieldProps {
   currentUserMarks: CurrentUserMark[]
   handleCurrentUserMarkChange: (mark: CurrentUserMark) => void
-  handleSelectedMarkValueChange: (value: string) => void
+  handleSelectedMarkValueChange: (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => void
   handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void
   selectedMark: CurrentUserMark
   selectedMarkValue: string
@@ -52,8 +53,6 @@ const MarkFormField = ({
   }
   const toggleActions = () => setDisplayActions(!displayActions)
   const markLabel = getToolboxLabelByMarkType(selectedMark.mark.type)
-  const { input: MarkInputComponent } =
-    MARK_TYPE_CONFIG[selectedMark.mark.type] || {}
   return (
     <div className={styles.container}>
       <div className={styles.trigger}>
@@ -84,14 +83,12 @@ const MarkFormField = ({
           </div>
           <div className={styles.inputWrapper}>
             <form onSubmit={(e) => handleFormSubmit(e)}>
-              {typeof MarkInputComponent !== 'undefined' && (
+              <input
-                <MarkInputComponent
+                className={styles.input}
-                  value={selectedMarkValue}
                 placeholder={markLabel}
-                  handler={handleSelectedMarkValueChange}
+                onChange={handleSelectedMarkValueChange}
-                  userMark={selectedMark}
+                value={selectedMarkValue}
               />
-              )}
               <div className={styles.actionsBottom}>
                 <button type="submit" className={styles.submitButton}>
                   NEXT

src/components/MarkInputs/Signature.module.scss

@@ -1,44 +0,0 @@
-@import '../../styles/colors.scss';
-
-$padding: 5px;
-
-.wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: $padding;
-}
-
-.relative {
-  position: relative;
-}
-
-.canvas {
-  outline: 1px solid black;
-  background-color: $body-background-color;
-  cursor: crosshair;
-
-  // Disable panning/zooming when touching canvas element
-  -ms-touch-action: none;
-  touch-action: none;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.absolute {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
-.reset {
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  right: $padding;
-  color: $primary-main;
-
-  &:hover {
-    color: $primary-dark;
-  }
-}

src/components/MarkInputs/Signature.tsx

@@ -1,101 +0,0 @@
-import { useRef, useState } from 'react'
-import { MarkInputProps } from '../../types/mark'
-import { getOptimizedPaths, optimizeSVG } from '../../utils'
-import { faEraser } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import styles from './Signature.module.scss'
-import { MarkRenderSignature } from '../MarkRender/Signature'
-
-export const MarkInputSignature = ({
-  value,
-  handler,
-  userMark
-}: MarkInputProps) => {
-  const location = userMark?.mark.location
-
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const [drawing, setDrawing] = useState(false)
-  const [paths, setPaths] = useState<string[]>(value ? JSON.parse(value) : [])
-
-  function update() {
-    if (location && paths) {
-      if (paths.length) {
-        const optimizedSvg = optimizeSVG(location, paths)
-        const extractedPaths = getOptimizedPaths(optimizedSvg)
-        handler(JSON.stringify(extractedPaths))
-      } else {
-        handler('')
-      }
-    }
-  }
-
-  const handlePointerDown = (event: React.PointerEvent) => {
-    const rect = event.currentTarget.getBoundingClientRect()
-    const x = event.clientX - rect.left
-    const y = event.clientY - rect.top
-
-    const ctx = canvasRef.current?.getContext('2d')
-    ctx?.beginPath()
-    ctx?.moveTo(x, y)
-    setPaths([...paths, `M ${x} ${y}`])
-    setDrawing(true)
-  }
-  const handlePointerUp = () => {
-    setDrawing(false)
-    update()
-    const ctx = canvasRef.current?.getContext('2d')
-    ctx?.clearRect(0, 0, canvasRef.current!.width, canvasRef.current!.height)
-  }
-  const handlePointerMove = (event: React.PointerEvent) => {
-    if (!drawing) return
-    const ctx = canvasRef.current?.getContext('2d')
-    const rect = canvasRef.current?.getBoundingClientRect()
-    const x = event.clientX - rect!.left
-    const y = event.clientY - rect!.top
-
-    ctx?.lineTo(x, y)
-    ctx?.stroke()
-
-    // Collect the path data
-    setPaths((prevPaths) => {
-      const newPaths = [...prevPaths]
-      newPaths[newPaths.length - 1] += ` L ${x} ${y}`
-      return newPaths
-    })
-  }
-
-  const handleReset = () => {
-    setPaths([])
-    setDrawing(false)
-    update()
-    const ctx = canvasRef.current?.getContext('2d')
-    ctx?.clearRect(0, 0, canvasRef.current!.width, canvasRef.current!.height)
-  }
-
-  return (
-    <>
-      <div className={styles.wrapper}>
-        <div className={styles.relative}>
-          <canvas
-            height={location?.height}
-            width={location?.width}
-            ref={canvasRef}
-            className={styles.canvas}
-            onPointerDown={handlePointerDown}
-            onPointerUp={handlePointerUp}
-            onPointerMove={handlePointerMove}
-            onPointerOut={handlePointerUp}
-          ></canvas>
-          {typeof userMark?.mark !== 'undefined' && (
-            <div className={styles.absolute}>
-              <MarkRenderSignature value={value} mark={userMark.mark} />
-            </div>
-          )}
-          <div className={styles.reset}>
-            <FontAwesomeIcon size="sm" icon={faEraser} onClick={handleReset} />
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}

src/components/MarkInputs/Text.tsx

@@ -1,19 +0,0 @@
-import { MarkInputProps } from '../../types/mark'
-import styles from '../MarkFormField/style.module.scss'
-
-export const MarkInputText = ({
-  value,
-  handler,
-  placeholder
-}: MarkInputProps) => {
-  return (
-    <input
-      className={styles.input}
-      placeholder={placeholder}
-      onChange={(e) => {
-        handler(e.currentTarget.value)
-      }}
-      value={value}
-    />
-  )
-}

src/components/MarkRender/Signature.tsx

@@ -1,13 +0,0 @@
-import { MarkRenderProps } from '../../types/mark'
-
-export const MarkRenderSignature = ({ value, mark }: MarkRenderProps) => {
-  const paths = value ? JSON.parse(value) : []
-
-  return (
-    <svg viewBox={`0 0 ${mark.location.width} ${mark.location.height}`}>
-      {paths.map((path: string) => (
-        <path d={path} stroke="black" fill="none" />
-      ))}
-    </svg>
-  )
-}

src/components/PDFView/PdfMarkItem.tsx

@@ -4,7 +4,6 @@ import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
 import { useScale } from '../../hooks/useScale.tsx'
 import { forwardRef } from 'react'
 import { npubToHex } from '../../utils/nostr.ts'
-import { MARK_TYPE_CONFIG } from '../getMarkComponents.tsx'
 
 interface PdfMarkItemProps {
   userMark: CurrentUserMark
@@ -28,8 +27,6 @@ const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
     const getMarkValue = () =>
       isEdited() ? selectedMarkValue : userMark.currentValue
     const { from } = useScale()
-    const { render: MarkRenderComponent } =
-      MARK_TYPE_CONFIG[userMark.mark.type] || {}
     return (
       <div
         ref={ref}
@@ -50,9 +47,7 @@ const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
           fontSize: inPx(from(pageWidth, FONT_SIZE))
         }}
       >
-        {typeof MarkRenderComponent !== 'undefined' && (
+        {getMarkValue()}
-          <MarkRenderComponent value={getMarkValue()} mark={userMark.mark} />
-        )}
       </div>
     )
   }

src/components/PDFView/PdfMarking.tsx

@@ -117,7 +117,8 @@ const PdfMarking = (props: PdfMarkingProps) => {
   //   setCurrentUserMarks(updatedCurrentUserMarks)
   // }
 
-  const handleChange = (value: string) => setSelectedMarkValue(value)
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) =>
+    setSelectedMarkValue(event.target.value)
 
   return (
     <>

src/components/getMarkComponents.tsx

@@ -1,16 +0,0 @@
-import { MarkType } from '../types/drawing'
-import { MarkConfigs } from '../types/mark'
-import { MarkInputSignature } from './MarkInputs/Signature'
-import { MarkInputText } from './MarkInputs/Text'
-import { MarkRenderSignature } from './MarkRender/Signature'
-
-export const MARK_TYPE_CONFIG: MarkConfigs = {
-  [MarkType.TEXT]: {
-    input: MarkInputText,
-    render: ({ value }) => <>{value}</>
-  },
-  [MarkType.SIGNATURE]: {
-    input: MarkInputSignature,
-    render: MarkRenderSignature
-  }
-}

src/pages/verify/index.tsx

@@ -55,7 +55,6 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { upgradeAndVerifyTimestamp } from '../../utils/opentimestamps.ts'
 import _ from 'lodash'
-import { MARK_TYPE_CONFIG } from '../../components/getMarkComponents.tsx'
 
 interface PdfViewProps {
   files: CurrentUserFile[]
@@ -115,8 +114,6 @@ const SlimPdfView = ({
                           alt={`page ${i} of ${file.name}`}
                         />
                         {marks.map((m) => {
-                          const { render: MarkRenderComponent } =
-                            MARK_TYPE_CONFIG[m.type] || {}
                           return (
                             <div
                               className={`file-mark ${styles.mark}`}
@@ -132,9 +129,7 @@ const SlimPdfView = ({
                                 fontSize: inPx(from(page.width, FONT_SIZE))
                               }}
                             >
-                              {typeof MarkRenderComponent !== 'undefined' && (
+                              {m.value}
-                                <MarkRenderComponent value={m.value} mark={m} />
-                              )}
                             </div>
                           )
                         })}

src/types/mark.ts

@@ -28,24 +28,3 @@ export interface MarkRect {
   width: number
   height: number
 }
-
-export interface MarkInputProps {
-  value: string
-  handler: (value: string) => void
-  placeholder?: string
-  userMark?: CurrentUserMark
-}
-
-export interface MarkRenderProps {
-  value?: string
-  mark: Mark
-}
-
-export interface MarkConfig {
-  input: React.FC<MarkInputProps>
-  render?: React.FC<MarkRenderProps>
-}
-
-export type MarkConfigs = {
-  [key in MarkType]?: MarkConfig
-}

src/utils/mark.ts

@@ -1,4 +1,4 @@
-import { CurrentUserMark, Mark, MarkLocation } from '../types/mark.ts'
+import { CurrentUserMark, Mark } from '../types/mark.ts'
 import { hexToNpub } from './nostr.ts'
 import { Meta, SignedEventContent } from '../types'
 import { Event } from 'nostr-tools'
@@ -24,7 +24,6 @@ import {
   faStamp,
   faTableCellsLarge
 } from '@fortawesome/free-solid-svg-icons'
-import { Config, optimize } from 'svgo'
 
 /**
  * Takes in an array of Marks already filtered by User.
@@ -159,11 +158,6 @@ export const DEFAULT_TOOLBOX: DrawTool[] = [
     icon: faT,
     label: 'Text'
   },
-  {
-    identifier: MarkType.SIGNATURE,
-    icon: faSignature,
-    label: 'Signature'
-  },
   {
     identifier: MarkType.FULLNAME,
     icon: faIdCard,
@@ -176,6 +170,12 @@ export const DEFAULT_TOOLBOX: DrawTool[] = [
     label: 'Job Title',
     isComingSoon: true
   },
+  {
+    identifier: MarkType.SIGNATURE,
+    icon: faSignature,
+    label: 'Signature',
+    isComingSoon: true
+  },
   {
     identifier: MarkType.DATETIME,
     icon: faClock,
@@ -266,24 +266,6 @@ export const getToolboxLabelByMarkType = (markType: MarkType) => {
   return DEFAULT_TOOLBOX.find((t) => t.identifier === markType)?.label
 }
 
-export const optimizeSVG = (location: MarkLocation, paths: string[]) => {
-  const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" width="${location.width}" height="${location.height}">${paths.map((path) => `<path d="${path}" stroke="black" fill="none" />`).join('')}</svg>`
-  const optimizedSVG = optimize(svgContent, {
-    multipass: true, // Optimize multiple times if needed
-    floatPrecision: 2 // Adjust precision
-  } as Config)
-
-  return optimizedSVG.data
-}
-
-export const getOptimizedPaths = (svgString: string) => {
-  const regex = / d="([^"]*)"/g
-  const matches = [...svgString.matchAll(regex)]
-  const pathValues = matches.map((match) => match[1])
-
-  return pathValues
-}
-
 export {
   getCurrentUserMarks,
   filterMarksByPubkey,

src/utils/pdf.ts

@@ -1,4 +1,4 @@
-import { MarkType, PdfPage } from '../types/drawing.ts'
+import { PdfPage } from '../types/drawing.ts'
 import { PDFDocument, PDFFont, PDFPage, rgb } from 'pdf-lib'
 import { Mark } from '../types/mark.ts'
 import * as PDFJS from 'pdfjs-dist'
@@ -132,17 +132,9 @@ export const addMarks = async (
 
   for (let i = 0; i < pages.length; i++) {
     if (marksPerPage && Object.hasOwn(marksPerPage, i)) {
-      marksPerPage[i]?.forEach((mark) => {
+      marksPerPage[i]?.forEach((mark) =>
-        switch (mark.type) {
-          case MarkType.SIGNATURE:
-            drawSignatureText(mark, pages[i])
-            break
-
-          default:
         drawMarkText(mark, pages[i], robotoFont)
-            break
+      )
-        }
-      })
     }
   }
 
@@ -253,19 +245,3 @@ async function embedFont(pdf: PDFDocument) {
   const embeddedFont = await pdf.embedFont(fontBytes)
   return embeddedFont
 }
-
-const drawSignatureText = (mark: Mark, page: PDFPage) => {
-  const { location } = mark
-  const { height } = page.getSize()
-
-  // Convert the mark location origin (top, left) to PDF origin (bottom, left)
-  const x = location.left
-  const y = height - location.top
-
-  if (hasValue(mark)) {
-    const paths = JSON.parse(mark.value!)
-    paths.forEach((d: string) => {
-      page.drawSvgPath(d, { x, y })
-    })
-  }
-}

vite.config.ts

@@ -1,16 +1,9 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tsconfigPaths from 'vite-tsconfig-paths'
-import { nodePolyfills } from 'vite-plugin-node-polyfills'
 
 export default defineConfig({
-  plugins: [
+  plugins: [react(), tsconfigPaths()],
-    react(),
-    tsconfigPaths(),
-    nodePolyfills({
-      include: ['os']
-    })
-  ],
   build: {
     target: 'ES2022'
   }