React Samples

React Code Editor Samples

React Code Editor bizim bir takım scriptleri yazmamızı sağlayan, bunları programlama dillerine göre renklendiren formatlayan editörlerdir. Bu blog altında geliştirdiğim react örnekleri ile bu kod editörlerini inceleyeceğim.

Onur Dayıbaşı

Published in

Frontend Development With JS

2 min readJan 31, 2024

React içerisinde kod editlemek, script yazmak veya bu kodu görüntülemek için farklı farklı editörler bulunuyor.

Bunlardan en popüler olanları

CodeMirror (Haftalık 2.5M download)
MonacoEditor (Haftalık 0.6M download)
Ace Editor ( Haftalık 0.4M download)

CodeMirror: Bu editörlerin birbirlerine göre farklı avantajları bulunuyor. CodeMirror her ortamda daha uygun çalışırken birçok ürün altyapısında da tercih ediliyor (CodeMirror Kullanımları),

Monaco: bunun yanında Monaco Editör Microsoft tarafından geliştiriliyor VSCode altyapısının Web’e bileşen olarak getirilmiş kütüphanesi diyebiliriz. GitHub dahil bir çok şirket Monaco Editör kullanıyor. (Dezavantaj boyutu büyük olması ve Mobil desteklememesi)

Ace: Editörde AWS, Khan Academy ve Cloud9IDE vb birçok şirket ve üründe kullanıyor (Ace Editor Kullanımları)

Bu editörlerin yanında bir takım SyntaxHighlight etme kütüphaneleride bulunuyor. Bunlardan bir taneside

react-syntax-highlighter ( Haftalık 2.2M download)

Bu blog içerisinde bu konu ile ilgili yaptığım örneklerden ileride bahsedeceğim. Bu alanda şimdilik 2 örnek bulunuyor fakat zaman içerisinde bu örnekleri artıracağım

https://onurdayibasi.dev/code-editor-knowledge-map

1. Simple Editor

TextArea ve Antd Overlay(PopupConfirm) bileşenlerini kullanarak geliştirdiğim bir örnek

Tabiki bir Code Editör’ü değil fakat TextArea içerisinde Pre, Overlay ve ContextMenu kendim ekleyerek;


      <pre className="t-pre" id="highlighting" aria-hidden="true">
            <code
              className="t-pre-content language-html"
              {...(typeof highlighted === 'string'
                ? {
                    dangerouslySetInnerHTML: {
                      __html: highlighted + '<br />',
                    },
                  }
                : {children: highlighted})}
            ></code>
          </pre>
          {overlay && SuggestionOverlay}
          {contextMenu && SuggestionContextMenu}

Kullanıcının klavye tuşlarınıdan bunların bir store tutulması
Bu metinler üzerinden highlighting işlemlerinin gerçekleştirilerek pre içerisinde kodun yazılması
Basılan tuşlara göre AutoComplete çıkması
{{ … }} içerisine yazılan scriptin validation işlemleri.

2. Coverage Analysis

Aşağıdaki örnekte bir test işlemi sonucunda kodun hangi kısımlarının yeni yazıldığı, hangi kısımlarında kodun cover edildiğini , hangi kısımlarında cover edilmediğini görebilirsiniz.

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.