From 686f580fb87e2d0cfa3bc4fa4ace280dd13a3503 Mon Sep 17 00:00:00 2001 From: eric-burel Date: Wed, 11 Sep 2024 20:09:53 +0200 Subject: [PATCH] introduce an ImageContent component in editor --- .../core/CodeMirrorEditor/ImageContent.tsx | 24 ++++++++++++++++++ .../react/src/core/CodeMirrorEditor/index.tsx | 8 +++++- .../1-welcome/_files/src/logo.png | Bin 0 -> 1824 bytes .../1-welcome/_files/src/logo.svg | 4 +++ 4 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 packages/react/src/core/CodeMirrorEditor/ImageContent.tsx create mode 100644 packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/_files/src/logo.png create mode 100644 packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/_files/src/logo.svg diff --git a/packages/react/src/core/CodeMirrorEditor/ImageContent.tsx b/packages/react/src/core/CodeMirrorEditor/ImageContent.tsx new file mode 100644 index 00000000..65367ca7 --- /dev/null +++ b/packages/react/src/core/CodeMirrorEditor/ImageContent.tsx @@ -0,0 +1,24 @@ +/** + * Based on https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types + * Removing svg, which is not binary. + */ +const binaryImageExtensions = new Set(['apng', 'png', 'avif', 'gif', 'jpg', 'jpeg', 'jfif', 'pjpeg', 'pjp', 'webp']); + +export function uint8ArrayToDataUrl(arr: Uint8Array) { + return URL.createObjectURL(new Blob([arr.buffer])); +} +export function isBinaryImagePath(filePath: string) { + const split = filePath.split('.'); + + if (split.length < 2) { + return false; + } + + const ext = split[split.length - 1]; + + return binaryImageExtensions.has(ext); +} + +export function ImageContent({ src }: { src: string }) { + return ; +} diff --git a/packages/react/src/core/CodeMirrorEditor/index.tsx b/packages/react/src/core/CodeMirrorEditor/index.tsx index ed02582e..cc6c0f89 100644 --- a/packages/react/src/core/CodeMirrorEditor/index.tsx +++ b/packages/react/src/core/CodeMirrorEditor/index.tsx @@ -21,6 +21,7 @@ import { BinaryContent } from './BinaryContent.js'; import { getTheme, reconfigureTheme } from './cm-theme.js'; import { indentKeyBinding } from './indent.js'; import { getLanguage } from './languages.js'; +import { isBinaryImagePath, ImageContent, uint8ArrayToDataUrl } from './ImageContent.js'; export interface EditorDocument { value: string | Uint8Array; @@ -90,6 +91,7 @@ export function CodeMirrorEditor({ const onChangeRef = useRef(onChange); const isBinaryFile = doc?.value instanceof Uint8Array; + const isBinaryImageFile = isBinaryFile && doc?.filePath && isBinaryImagePath(doc?.filePath); onScrollRef.current = onScroll; onChangeRef.current = onChange; @@ -187,7 +189,11 @@ export function CodeMirrorEditor({ return (
- {isBinaryFile && } + {isBinaryImageFile ? ( + + ) : isBinaryFile ? ( + + ) : null}
); diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/_files/src/logo.png b/packages/template/src/content/tutorial/1-basics/1-introduction/1-welcome/_files/src/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..5860818fd28e1c755d6bbce90dc15c5aca84236a GIT binary patch literal 1824 zcmV+*2jBRKP)pF8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H12CYd% zK~z|U?U;Rxl+_i+f9Jltuv@JH21N+ctyp48z?pexmhQ~3Od~B(Y+^rRT1hNzSX-OM zlxiRtYqVBMKP(!s6`ICIY%L_UEh&w)wUn7%%IthBN~Mv;M*pCRTSNlFva@ra{xP!% zxVy}vwn^=iOy<3FpL@=8PVPPTykn9W4fE$GFAXNLQrPq5eC~-+iT}rWp=qQa6N%25 zL-;#_3AO^!>dbEaPYZi5;Ed!)qsdt`xs^y=K+Atg(|ZO@0Q1{B+ngU-ZGkOEYJR7T zN296fW_J1LjG^Pj;_m(Ll)pw0i!GcdSAE#b9xmo{zdRRzI0ni8t5oWKITq`f4Z+33 z<6&MHCa;v-BsDQq+LPTIO)Tt0{yt&%lzX!~N3!i=VQNd@s|O700>+j2SSf?h{b!vB-nMI?i>*cft zXCDD50KibwS_MOU1D*ISK(#tF1E+5b4gwqD%$n~d?Z9!j!zCoG zmf1tCP1Q|3Jv}GP%thm=>my)e8?y~wGvl#hKDYH;@ntfZ z76N+;G#%LKH1O5oIoCY6)QhyN^=KHT_sVJbq)d(_Qd_CoItO@+pP8@DEf>0PDCfKT zG-OZBZkv8pIiG!KaBy%a5~gm6hRGKs{RU_#@r^=eHyYMOpjpGe8Cqsom&8;rA2ax1 zjZDnYGJtEs3PY2auR*SeKbrnA|o&#>}SGY*?4CokF6Cg`Fn1 zQ^w~^ydSt$;un!Hb<0?~ot(XXtg;!D5WLjvDxWSC3YFn`FVco}Az~6!flt<_S|vV1 zz;tK6I=7V1-F*7RS1Rr5@9*z#jwI5zd0JjH<1xXUv;4n->HFuK^hQzc?Y>piOBZ%; zsW&$Rz?u6d5McbYT#AIPxyt6sJ()53tCrF{1tV+nk>kjZ3PKyd)8@*_zq<+Fc4JP$B@=?&|>s_pVMeS5Mm zmdk&7{cKz1LUtRn4f2{13zO>wwbEf+a1I$$fPwn+Jz*GLJl;4)e90oPtC7xV5d}xh z^hl*i-`UsG^V)bFjT3IH$$wTV&F`yU^k)9egc?TxBu%h-A7F5F>(;H+(QL)Skiadb>URLMM9X?$c?0WCVay=wIE3u(Km#*N`R>(!-M#y8B%WFv zNhGf^vqsjR3$;2aT?w`B0k~`=qNE7`f6L{LA{_vb3l;*@ciubznJYEwTxMSa@X~dq z-dsl@_mf7}8Me9fmt8LiRsfRm`Di@VNc-yE@-PDWk*z*Hk+xDHdw;Q5JQ_=+Zin#tqw&-iJ=G`2Bfs36dq!w;efVg5d;29LhS_W<>W`O26Upz* z?dX^?V)8ZQpRNvG&{isB*IhU;Fc3>5mq)_neu*ck@2)yVbTl3~x%)sRpary4Vjadm z&fs|ap}{_25>`9feZ4(DM!Fq1ZtyiAZpOCipua(qZ`8lgD&QEkTED?y$9Q9y7*y{B zUIC_6eDlVUIORRr{h&VrhV1JTDz4qe`d1U6y}kXCK{YQiScF&v%szd-)SDaqC2Jgr zL^6{qmHy-V_U#)SjWcgvdb0P2-#DAIV8Mcm4jr0u^1y)|C(p O0000 + + +