fix add type attribute to prevent form submission (#163)

Added type=button to prevent unnecessary form submissions when the button is used within a form. This resolves issues where interacting with the button inadvertently triggers form submissions.
yoopta-editor · May 18, 2024 · 2744227 · 2744227
1 parent 68ab257
commit 2744227
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 0 deletions.
diff --git a/packages/plugins/embed/src/ui/Placeholder.tsx b/packages/plugins/embed/src/ui/Placeholder.tsx
@@ -20,6 +20,7 @@ const Placeholder = ({ attributes, children, blockId }) => {
       contentEditable={false}
     >
       <button
+        type="button"
         className={`yoopta-button yoo-embed-p-[12px_36px_12px_12px] yoo-embed-flex yoo-embed-items-center yoo-embed-text-left yoo-embed-w-full yoo-embed-overflow-hidden yoo-embed-rounded-[3px] yoo-embed-text-[14px] yoo-embed-text-[rgba(55,53,47,0.65)] yoo-embed-relative yoo-embed-cursor-pointer yoo-embed-border-none yoo-embed-bg-[#efefef] yoo-embed-transition-[background-color_100ms_ease-in] hover:yoo-embed-bg-[#e3e3e3]`}
         onClick={() => setIsUploaderOpen(true)}
         ref={refs.setReference}

diff --git a/packages/plugins/file/src/ui/Placeholder.tsx b/packages/plugins/file/src/ui/Placeholder.tsx
@@ -29,6 +29,7 @@ const Placeholder = ({ attributes, children, blockId }) => {
       contentEditable={false}
     >
       <button
+        type="button"
         className={`yoopta-button yoo-file-p-[12px_36px_12px_12px] yoo-file-flex yoo-file-items-center yoo-file-text-left yoo-file-w-full yoo-file-overflow-hidden yoo-file-rounded-[3px] yoo-file-text-[14px] yoo-file-text-[rgba(55,53,47,0.65)] yoo-file-relative yoo-file-cursor-pointer yoo-file-border-none yoo-file-bg-[#efefef] yoo-file-transition-[background-color_100ms_ease-in] hover:yoo-file-bg-[#e3e3e3]`}
         onClick={() => setIsUploaderOpen(true)}
         ref={refs.setReference}

diff --git a/packages/plugins/image/src/ui/Placeholder.tsx b/packages/plugins/image/src/ui/Placeholder.tsx
@@ -32,6 +32,7 @@ const Placeholder = ({ attributes, children, blockId }) => {
         className={`yoopta-button yoo-image-p-[12px_36px_12px_12px] yoo-image-flex yoo-image-items-center yoo-image-text-left yoo-image-w-full yoo-image-overflow-hidden yoo-image-rounded-[3px] yoo-image-text-[14px] yoo-image-text-[rgba(55,53,47,0.65)] yoo-image-relative yoo-image-cursor-pointer yoo-image-border-none yoo-image-bg-[#efefef] yoo-image-transition-[background-color_100ms_ease-in] hover:yoo-image-bg-[#e3e3e3]`}
         onClick={() => setIsUploaderOpen(true)}
         disabled={loading}
+        type="button"
         ref={refs.setReference}
       >
         {loading ? (

diff --git a/packages/plugins/video/src/ui/Placeholder.tsx b/packages/plugins/video/src/ui/Placeholder.tsx
@@ -29,6 +29,7 @@ const Placeholder = ({ attributes, children, blockId }) => {
       contentEditable={false}
     >
       <button
+        type="button"
         className={`yoopta-button yoo-video-p-[12px_36px_12px_12px] yoo-video-flex yoo-video-items-center yoo-video-text-left yoo-video-w-full yoo-video-overflow-hidden yoo-video-rounded-[3px] yoo-video-text-[14px] yoo-video-text-[rgba(55,53,47,0.65)] yoo-video-relative yoo-video-cursor-pointer yoo-video-border-none yoo-video-bg-[#efefef] yoo-video-transition-[background-color_100ms_ease-in] hover:yoo-video-bg-[#e3e3e3]`}
         onClick={() => setIsUploaderOpen(true)}
         disabled={loading}

diff --git a/packages/tools/action-menu/src/components/DefaultActionMenuRender.tsx b/packages/tools/action-menu/src/components/DefaultActionMenuRender.tsx
@@ -56,6 +56,7 @@ const DefaultActionMenuRender = ({
 
             return (
               <button
+                type="button"
                 key={action.type}
                 {...getItemProps(action.type)}
                 className="yoopta-button yoo-action-menu-flex yoo-action-menu-w-full yoo-action-menu-cursor-pointer yoo-action-menu-items-center yoo-action-menu-space-x-2 yoo-action-menu-rounded-md yoo-action-menu-px-1 yoo-action-menu-py-1 yoo-action-menu-mb-0.5 last:yoo-action-menu-mb-0 yoo-action-menu-text-left yoo-action-menu-text-sm hover:yoo-action-menu-bg-[#f4f4f5] aria-selected:yoo-action-menu-bg-[#f0f0f0]"

diff --git a/packages/tools/link-tool/src/components/DefaultLinkToolRender.tsx b/packages/tools/link-tool/src/components/DefaultLinkToolRender.tsx
@@ -76,13 +76,15 @@ const DefaultLinkToolRender = (props: LinkToolRenderProps) => {
       </div>
       <div className="yoo-link-tool-mt-2 yoo-link-tool-flex yoo-link-tool-justify-between">
         <button
+          type="button"
           className="yoopta-button yoo-link-tool-bg-[#1183ff] yoo-link-tool-text-[#fff] yoo-link-tool-text-sm yoo-link-tool-font-medium yoo-link-tool-py-[5px] yoo-link-tool-px-[10px] yoo-link-tool-rounded-md yoo-link-tool-shadow-sm disabled:yoo-link-tool-opacity-50"
           disabled={!link.url || !isUrl(link.url)}
           onClick={onSave}
         >
           Add
         </button>
         <button
+          type="button"
           className="yoopta-button yoo-link-tool-ml-2 yoo-link-tool-bg-[#f4f4f5] yoo-link-tool-text-[#000] yoo-link-tool-text-sm yoo-link-tool-font-medium yoo-link-tool-py-[5px] yoo-link-tool-px-[10px] yoo-link-tool-rounded-md yoo-link-tool-shadow-sm disabled:yoo-link-tool-opacity-50"
           onClick={onDelete}
         >