index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CodeJar – a micro code editor</title>
    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/github.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            background: #F6F8F8;
        }

        main {
            max-width: 800px;
            margin: 40px auto;
            padding: 20px;
        }

        .editor {
            background: #fff;
            border-radius: 6px;
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
            font-family: "Source Code Pro", monospace;
            font-size: 14px;
            font-weight: 400;
            min-height: 240px;
            letter-spacing: normal;
            line-height: 20px;
            padding: 10px;
            tab-size: 4;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<main>
    <div id="editor" class="editor language-js"></div>
    <div id="editor-rtl" class="editor language-js" dir="rtl"></div>
</main>
<script type="module">
  import {CodeJar} from './dist/codejar.js'
  import {withLineNumbers} from './dist/linenumbers.js'

  const editor = document.querySelector('#editor')

  const highlight = editor => {
    // highlight.js does not trim old tags,
    // let's do it by this hack.
    editor.textContent = editor.textContent
    hljs.highlightBlock(editor)
  }

  const jar = CodeJar(editor, withLineNumbers(highlight), {multilineIndentation: true, tab: '  '})

  jar.updateCode(localStorage.getItem('code'))
  jar.onUpdate(code => {
    localStorage.setItem('code', code)
  })

  // Setup the RTL Demo:
  const editorRtl = document.querySelector('#editor-rtl')
  const jarRtl = CodeJar(editorRtl, withLineNumbers(highlight, { side: "right" }))

  const rtlDemoCode = localStorage.getItem('code-rtl') || `لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار
النشوة وتمجيد الألم نشأت بالفعل، وسأعرض لك التفاصيل لتكتشف حقيقة وأساس تلك
السعادة البشرية، فلا أحد يرفض أو يكره
أو يتجنب الشعور بالسعادة، ولكن بفضل هؤلاء الأشخاص الذين
لا يدركون بأن السعادة لا بد أن نستشعرها بصورة أكثر
عقلانية ومنطقية فيعرضهم هذا لمواجهة الظروف الأليمة، وأكرر
بأنه لا يوجد من يرغب في الحب ونيل المنال
ويتلذذ بالآلام، الألم هو الألم ولكن نتيجة لظروف ما
قد تكمن السعاده فيما نتحمله من كد وأسي.`
  jarRtl.updateCode(rtlDemoCode)
  jarRtl.onUpdate(code => {
    localStorage.setItem('code-rtl', code)
  })

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
</body>
</html>