fix: correção de estilos e images

skaduhs5232 · Jun 11, 2024 · 4b8abac · 4b8abac
1 parent 4c23c8f
commit 4b8abac
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 53 deletions.
diff --git a/src/extensions/image/image.ts b/src/extensions/image/image.ts
@@ -159,8 +159,11 @@ export const Image = Node.create<ImageOptions>({
         getAttrs: node => {
           const parent = node.parentElement as HTMLElement
           const imageUrlRegex = /(https?:\/\/.*\.(?:png|jpg|jpeg|gif|bmp|webp|svg))/i
+          const isBase64Url = /^data:image\/(png|jpeg);base64,[A-Za-z0-9+/=]+$/.test(node.getAttribute('src') as string)
           const isUrlImage = imageUrlRegex.test(node.getAttribute('src') as string)
-          return (parent.classList.contains('ex-image-wrapper') || parent.tagName.toLocaleLowerCase() == 'figure' || isUrlImage) && null
+          return (
+            (parent.classList.contains('ex-image-wrapper') || parent.tagName.toLocaleLowerCase() == 'figure' || isUrlImage || isBase64Url) && null
+          )
         }
       }
     ]

diff --git a/src/public/style.css b/src/public/style.css
@@ -56,7 +56,7 @@
   font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
   color: #333 !important;
   font-size: 14px;
-  line-height: 1.3em; 
+  line-height: 1.3em;
 }
 
 .tiptap blockquote {
@@ -68,33 +68,35 @@
   margin: 0 0 9px;
 }
 
- table {
-  border-collapse: collapse;
-  table-layout: fixed;
-  width: 100%;
-  overflow: hidden;
-  max-width: 600px;
-}
+.ProseMirror {
+  table {
+    border-collapse: collapse;
+    table-layout: fixed;
+    width: 100%;
+    overflow: hidden;
+    max-width: 600px;
+  }
 
-.single-cell-seleceted {
-  background-color: var(--color-focused-background);
-}
+  td,
+   th {
+     min-width: 1em;
+    border: 2px solid #ced4da;
+    padding: 3px 5px;
+    vertical-align: top;
+    box-sizing: border-box;
+    position: relative;
+  }
 
- td,
- th {
-  min-width: 1em;
-  border: 2px solid #ced4da;
-  padding: 3px 5px;
-  vertical-align: top;
-  box-sizing: border-box;
-  position: relative;
+   th {
+     font-weight: bold;
+     text-align: left;
+     background-color: #f1f3f5;
+    }
 }
 
- th {
-  font-weight: bold;
-  text-align: left;
-  background-color: #f1f3f5;
-}
+  .single-cell-seleceted {
+    background-color: var(--color-focused-background);
+  }
 
  .selectedCell:after {
   z-index: 1;
@@ -239,7 +241,7 @@
     color: #fff;
     margin: -4px -3px
   }
-  
+
   .resize-cursor {
     cursor: ew-resize;
     cursor: col-resize;
@@ -248,7 +250,7 @@
   .editor-shell {
     /* margin: 20px auto; */
     border-radius: 2px;
-    max-width: 1100px;
+    /* max-width: 1100px; */
     color: #000;
     position: relative;
     line-height: 1.7;
@@ -270,7 +272,7 @@
     background: #fafafa;
   }
 
-  
+
   .editor-scroller::-webkit-scrollbar {
     width: 8px;
     scrollbar-width: thin;
@@ -281,16 +283,16 @@
     background: #f1f1f1;
     border-radius: 10px;
   }
-    
+
   /* Handle */
   .editor-scroller::-webkit-scrollbar-thumb {
-    background: #888; 
+    background: #888;
     border-radius: 10px;
   }
 
   /* Handle on hover */
   .editor-scroller::-webkit-scrollbar-thumb:hover {
-    background: #555; 
+    background: #555;
   }
 
   .editor-shell {
@@ -337,13 +339,13 @@
   }
 
   .ex-dropdownList-content {
-    
+
     padding: var(--spacing-md);
   }
 
   .ex-dropdown-table-cells {
     flex-direction: row;
-    width: calc(12px * 10 + 2px * 10) /* calc(width * 10 + margin(left + right) * 10 + padding(left + right)) */ 
+    width: calc(12px * 10 + 2px * 10) /* calc(width * 10 + margin(left + right) * 10 + padding(left + right)) */
   }
 
   .ex-dropdown-alignments {
@@ -368,7 +370,7 @@
     z-index: 3 !important;
     width: 360px;
   }
- 
+
   .ex-dropdown-baloon {
     flex-direction: row;
     flex-wrap: nowrap;
@@ -472,7 +474,7 @@
 }
 
 .balloon-panel {
-  position: relative; 
+  position: relative;
   min-height: 30px;
   padding: 1px;
   border-radius: 5px;
@@ -557,10 +559,10 @@
 }
 
 .quadrado {
-  width: 10px; 
-  height: 10px; 
-  background-color: #3779eb; 
-  position: absolute; 
+  width: 10px;
+  height: 10px;
+  background-color: #3779eb;
+  position: absolute;
   display: block;
 }
 
@@ -624,7 +626,7 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  justify-content: space-between; 
+  justify-content: space-between;
   width: 100%;
   margin-top: 10px;
   /* gap: 117px; */
@@ -709,8 +711,8 @@
 }
 
 .ex-icone-cancelamento::after {
-  content: '\2716'; 
-  font-family: Arial, sans-serif; 
+  content: '\2716';
+  font-family: Arial, sans-serif;
   color: red;
   font-size: 24px;
     right: 91px;
@@ -729,22 +731,22 @@
 .ex-bolinha {
   width: 19px;
   height: 19px;
-  background-color: hsl(218,81.8%,56.9%); 
-  border-radius: 50%; 
-  position: absolute; 
-  cursor: pointer; 
-  z-index: 0; 
+  background-color: hsl(218,81.8%,56.9%);
+  border-radius: 50%;
+  position: absolute;
+  cursor: pointer;
+  z-index: 0;
   display: none;
 }
 
 .ex-getTable{
 width: 20px;
 height: 19px;
-background-color: hsl(218,81.8%,56.9%); 
-border-radius: 50%; 
-position: absolute; 
-cursor: pointer; 
-z-index: 0; 
+background-color: hsl(218,81.8%,56.9%);
+border-radius: 50%;
+position: absolute;
+cursor: pointer;
+z-index: 0;
 display: none;
 }
 
@@ -869,4 +871,4 @@ display: none;
   justify-items: start;
   margin-left: var(--spacing-sm);
   margin-top: var(--spacing-sm);
-}
+}