editor/index.html at main · jekyllex/editor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script>
    const themeMap = {
      0: "one-light",
      1: "one-dark",
      2: "duotone-dark",
      3: "duotone-space",
      4: "coldark-cold",
      5: "coldark-dark",
      6: "solarized-light",
      7: "tomorrow-night",
    };

    const urlParams = new URLSearchParams(window.location.search);
    const theme = themeMap[urlParams.get("theme")] ?? themeMap[0];

    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = `/assets/css/prism/${theme}.css`;
    document.head.prepend(link);
  </script>

  <link rel="stylesheet" href="/assets/css/styles.css" />
  <link rel="stylesheet" href="/assets/css/prism-live.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/line-numbers/prism-line-numbers.min.css" />
  <title>JekyllEx editor</title>

</head>
<body>
  <textarea id="editor" class="prism-live line-numbers"></textarea>

  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
  <script src="/assets/js/prism-live/prism-live.js"></script>

  <script>
    function encode64(value) {
      const bytes = new TextEncoder().encode(value);
      return btoa(String.fromCodePoint(...bytes));
    }

    function decode64(base64) {
      const bytes = Uint8Array.from(atob(base64), (m) => m.codePointAt(0));
      return new TextDecoder().decode(bytes);
    }
  </script>

  <script type="text/javascript">
    let _text = "";
    const syncEvent = new CustomEvent("sync");

    function setText(base64) {
      _text = decode64(base64);
      editor.value = _text;
      window.dispatchEvent(syncEvent);
      if (typeof IOBridge != "undefined") IOBridge.setLoaded();
    }

    function getText() {
      return encode64(_text);
    }
  </script>

  <script type="text/javascript">
    const langMap = {
      "h": "c",
      "bat": "batch",
      "markdown": "md",
      "ps1": "powershell",
      "psm1": "powershell",
    };

    const timeout = urlParams.get("timeout") ?? 1000;
    const language = langMap[urlParams.get("lang")] ?? urlParams.get("lang") ?? "rb";

    if (language == "md") Prism.plugins.autoloader.loadLanguages("yaml");

    const text = typeof urlParams.get("text") === "string"
      ? decodeURIComponent(urlParams.get("text"))
      : undefined;

    urlParams.delete("text");
    window.history.replaceState({}, "", `${window.location.pathname}?${urlParams}`);

    if (!urlParams.has("lang")) {
      urlParams.set("lang", language);
      window.history.replaceState({}, "", `${window.location.pathname}?${urlParams}`);
    }

    const editor = document.getElementById("editor");
    editor.classList.add(`language-${language}`);
    editor.focus();

    editor.addEventListener("prism-live-init", () => {
      editor.placeholder = "Click anywhere to start typing!";
    })

    // set click listener on body to focus on editor
    document.body.addEventListener("click", () => {
      editor.focus();
    });

    if (text != undefined) setText(text);
  </script>

  <script type="text/javascript">
    const debounce = (fn, timeout) => {
      let timer;

      return (value) => {
        clearTimeout(timer);
        timer = setTimeout(() => fn.call(this, value), timeout);
      }
    }

    window.debounce = debounce((value) => {
      _text = value;
      const base64 = encode64(value);
      if (typeof IOBridge != "undefined") IOBridge.saveText(base64);
    }, timeout);
  </script>
</body>
</html>