@memori.ai/memori-react 8.15.1 → 8.16.0

package/src/components/Snippet/__snapshots__/Snippet.test.tsx.snap

@@ -21,46 +21,44 @@ exports[`renders SnippetUpload with css code 1`] = `
 }
         </code>
       </pre>
-      <button
-        class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
-        title="copy"
+      <div
+        class="memori-snippet--copy-wrapper"
       >
-        <span
-          class="memori-button--icon"
+        <button
+          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
+          title="copy"
         >
-          <svg
-            aria-hidden="true"
-            fill="none"
-            focusable="false"
-            role="img"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="memori-button--icon"
           >
-            <rect
-              height="14"
-              rx="2"
-              ry="2"
-              width="14"
-              x="8"
-              y="8"
-            />
-            <path
-              d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="14"
+                rx="2"
+                ry="2"
+                width="14"
+                x="8"
+                y="8"
+              />
+              <path
+                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
-    <p
-      class="memori-snippet--caption"
-      id="snippet-a669fadb-12c0-469b-9b6c-34db22d371ca"
-    >
-      Snippet
-    </p>
   </div>
 </div>
 `;
@@ -84,46 +82,44 @@ exports[`renders SnippetUpload with html code 1`] = `
           &lt;p&gt;ciao&lt;/p&gt;
         </code>
       </pre>
-      <button
-        class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
-        title="copy"
+      <div
+        class="memori-snippet--copy-wrapper"
       >
-        <span
-          class="memori-button--icon"
+        <button
+          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
+          title="copy"
         >
-          <svg
-            aria-hidden="true"
-            fill="none"
-            focusable="false"
-            role="img"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="memori-button--icon"
           >
-            <rect
-              height="14"
-              rx="2"
-              ry="2"
-              width="14"
-              x="8"
-              y="8"
-            />
-            <path
-              d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="14"
+                rx="2"
+                ry="2"
+                width="14"
+                x="8"
+                y="8"
+              />
+              <path
+                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
-    <p
-      class="memori-snippet--caption"
-      id="snippet-65ca4a6d-f20b-402e-9d79-5e470f247927"
-    >
-      Snippet
-    </p>
   </div>
 </div>
 `;
@@ -147,46 +143,44 @@ exports[`renders SnippetUpload with js code 1`] = `
           console.log("Hello World!");
         </code>
       </pre>
-      <button
-        class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
-        title="copy"
+      <div
+        class="memori-snippet--copy-wrapper"
       >
-        <span
-          class="memori-button--icon"
+        <button
+          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
+          title="copy"
         >
-          <svg
-            aria-hidden="true"
-            fill="none"
-            focusable="false"
-            role="img"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="memori-button--icon"
           >
-            <rect
-              height="14"
-              rx="2"
-              ry="2"
-              width="14"
-              x="8"
-              y="8"
-            />
-            <path
-              d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="14"
+                rx="2"
+                ry="2"
+                width="14"
+                x="8"
+                y="8"
+              />
+              <path
+                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
-    <p
-      class="memori-snippet--caption"
-      id="snippet-95226d7e-7bae-465e-8b80-995587bb5971"
-    >
-      Snippet
-    </p>
   </div>
 </div>
 `;
@@ -211,12 +205,6 @@ exports[`renders SnippetUpload with js code without copy button 1`] = `
         </code>
       </pre>
     </div>
-    <p
-      class="memori-snippet--caption"
-      id="snippet-95226d7e-7bae-465e-8b80-995587bb5971"
-    >
-      Snippet
-    </p>
   </div>
 </div>
 `;
@@ -240,46 +228,44 @@ exports[`renders SnippetUpload with js code without line numbers 1`] = `
           console.log("Hello World!");
         </code>
       </pre>
-      <button
-        class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
-        title="copy"
+      <div
+        class="memori-snippet--copy-wrapper"
       >
-        <span
-          class="memori-button--icon"
+        <button
+          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
+          title="copy"
         >
-          <svg
-            aria-hidden="true"
-            fill="none"
-            focusable="false"
-            role="img"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="memori-button--icon"
           >
-            <rect
-              height="14"
-              rx="2"
-              ry="2"
-              width="14"
-              x="8"
-              y="8"
-            />
-            <path
-              d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="14"
+                rx="2"
+                ry="2"
+                width="14"
+                x="8"
+                y="8"
+              />
+              <path
+                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
-    <p
-      class="memori-snippet--caption"
-      id="snippet-95226d7e-7bae-465e-8b80-995587bb5971"
-    >
-      Snippet
-    </p>
   </div>
 </div>
 `;
@@ -287,7 +273,7 @@ exports[`renders SnippetUpload with js code without line numbers 1`] = `
 exports[`renders SnippetUpload with preview mode (clamping) 1`] = `
 <div>
   <div
-    class="memori-snippet"
+    class="memori-snippet memori-snippet--preview"
   >
     <div
       class="memori-snippet--content"
@@ -304,50 +290,87 @@ exports[`renders SnippetUpload with preview mode (clamping) 1`] = `
 import type { Medium } from 'types';
 import { prismSyntaxLangs } from 'helpers/constants';
 import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { atomDark } from 'r
-...
+import { atomDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import tsx from 'react-syntax-highlighter/dist/cjs/languages/prism/tsx';
+import scss from 'react-syntax-highlighter/dist/cjs/languages/prism/scss';
+import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash';
+import python from 'react-syntax-highlighter/dist/cjs/languages/prism/python';
+import cpp from 'react-syntax-highlighter/dist/cjs/languages/prism/cpp';
+
+interface Props {
+  medium: Medium;
+  preview?: boolean;
+}
+
+// These have to match prismSyntaxLangs
+SyntaxHighlighter.registerLanguage('tsx', tsx);
+SyntaxHighlighter.registerLanguage('scss', scss);
+SyntaxHighlighter.registerLanguage('bash', bash);
+SyntaxHighlighter.registerLanguage('python', python);
+SyntaxHighlighter.registerLanguage('cpp', cpp);
+
+const Snippet = ({ medium, preview = false }: Props) =&gt; {
+  return (
+    &lt;SyntaxHighlighter
+      style={atomDark}
+      showLineNumbers
+      language={
+        prismSyntaxLangs.find(
+          (l) =&gt;
+            medium.mimeType === l.mimeType,
+        )?.lang ?? 'text'
+      }
+    &gt;
+      {medium.content?.length && medium.content.length &gt; 200 && preview
+        ? \`\${medium.content.slice(0, 200)}
+...\`
+        : \`\${medium.content}\`}
+    &lt;/SyntaxHighlighter&gt;
+  );
+};
+
+export default Snippet;
+
         </code>
       </pre>
-      <button
-        class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
-        title="copy"
+      <div
+        class="memori-snippet--copy-wrapper"
       >
-        <span
-          class="memori-button--icon"
+        <button
+          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
+          title="copy"
         >
-          <svg
-            aria-hidden="true"
-            fill="none"
-            focusable="false"
-            role="img"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="memori-button--icon"
           >
-            <rect
-              height="14"
-              rx="2"
-              ry="2"
-              width="14"
-              x="8"
-              y="8"
-            />
-            <path
-              d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="14"
+                rx="2"
+                ry="2"
+                width="14"
+                x="8"
+                y="8"
+              />
+              <path
+                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
-    <p
-      class="memori-snippet--caption"
-      id="snippet-38dd29a5-cdf6-40f6-963a-8e42a7caaac1"
-    >
-      Snippet
-    </p>
   </div>
 </div>
 `;
@@ -415,46 +438,44 @@ export default Snippet;
 
         </code>
       </pre>
-      <button
-        class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
-        title="copy"
+      <div
+        class="memori-snippet--copy-wrapper"
       >
-        <span
-          class="memori-button--icon"
+        <button
+          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
+          title="copy"
         >
-          <svg
-            aria-hidden="true"
-            fill="none"
-            focusable="false"
-            role="img"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="memori-button--icon"
           >
-            <rect
-              height="14"
-              rx="2"
-              ry="2"
-              width="14"
-              x="8"
-              y="8"
-            />
-            <path
-              d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="14"
+                rx="2"
+                ry="2"
+                width="14"
+                x="8"
+                y="8"
+              />
+              <path
+                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
-    <p
-      class="memori-snippet--caption"
-      id="snippet-4946dca4-7103-4400-b80d-94b77f9a4f0a"
-    >
-      Snippet
-    </p>
   </div>
 </div>
 `;
@@ -478,46 +499,44 @@ exports[`renders SnippetUpload with text 1`] = `
           &lt;p&gt;ciao&lt;/p&gt;
         </code>
       </pre>
-      <button
-        class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
-        title="copy"
+      <div
+        class="memori-snippet--copy-wrapper"
       >
-        <span
-          class="memori-button--icon"
+        <button
+          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
+          title="copy"
         >
-          <svg
-            aria-hidden="true"
-            fill="none"
-            focusable="false"
-            role="img"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="memori-button--icon"
           >
-            <rect
-              height="14"
-              rx="2"
-              ry="2"
-              width="14"
-              x="8"
-              y="8"
-            />
-            <path
-              d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="14"
+                rx="2"
+                ry="2"
+                width="14"
+                x="8"
+                y="8"
+              />
+              <path
+                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
-    <p
-      class="memori-snippet--caption"
-      id="snippet-43ac43b8-e220-4111-b89d-c5bfe8b031e2"
-    >
-      Snippet
-    </p>
   </div>
 </div>
 `;
@@ -541,46 +560,44 @@ exports[`renders SnippetUpload with text as fallback 1`] = `
           &lt;p&gt;ciao&lt;/p&gt;
         </code>
       </pre>
-      <button
-        class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
-        title="copy"
+      <div
+        class="memori-snippet--copy-wrapper"
       >
-        <span
-          class="memori-button--icon"
+        <button
+          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
+          title="copy"
         >
-          <svg
-            aria-hidden="true"
-            fill="none"
-            focusable="false"
-            role="img"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="memori-button--icon"
           >
-            <rect
-              height="14"
-              rx="2"
-              ry="2"
-              width="14"
-              x="8"
-              y="8"
-            />
-            <path
-              d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
-            />
-          </svg>
-        </span>
-      </button>
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              role="img"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="14"
+                rx="2"
+                ry="2"
+                width="14"
+                x="8"
+                y="8"
+              />
+              <path
+                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
     </div>
-    <p
-      class="memori-snippet--caption"
-      id="snippet-cc8882fa-d7d5-435a-90a1-5c9f2a1bc918"
-    >
-      Snippet
-    </p>
   </div>
 </div>
 `;