p2world.github.io/editor.html at master · p2world/p2world.github.io · 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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Editor</title>
  <!-- DOMPurify from CDN -->
  <script src="https://cdn.jsdelivr.net/npm/dompurify@3.3.0/dist/purify.min.js" integrity="" crossorigin="anonymous"></script>
  <style>
    :root{
      --bg: #fff;
      --fg: #333;

    }
    @media (prefers-color-scheme: dark){
      :root{
        --bg: #000;
        --fg: #ba8e23;
      }
    }
    body{
      background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased;
    }
    .editor{
      outline: none;
      padding-bottom: 70vh;
    }
    header {
      display: flex;
      justify-content: end;
    }
  </style>
</head>
<body>
  <header aria-hidden="true">
    <button onclick="editor.innerHTML = ''">X</button>
  </header>
  <div id="editor" class="editor" contenteditable="true" aria-label="Rich editable content area">
  </div>

  <script>
    (function(){
      const editor = document.getElementById('editor');

      // Utility: insert HTML at current caret using Range/Selection
      function insertHtmlAtCursor(html){
        const sel = window.getSelection();
        if (!sel || sel.rangeCount === 0){
          editor.insertAdjacentHTML('beforeend', html);
          return;
        }
        const range = sel.getRangeAt(0);
        range.deleteContents();
        const frag = range.createContextualFragment(html);
        range.insertNode(frag);
        // move cursor to end of inserted fragment
        range.collapse(false);
        sel.removeAllRanges();
        sel.addRange(range);
      }

      // Paste handler: sanitize HTML using DOMPurify (default config)
      editor.addEventListener('paste', function(ev){
        // Prevent default paste handling so we can sanitize first


        const clipboard = ev.clipboardData || window.clipboardData;
        if (!clipboard) return;

        // prefer HTML if available, otherwise fall back to plain text
        const html = clipboard.getData('text/html');
        const text = clipboard.getData('text/plain');

        if (!html) {
          return;
        }
        ev.preventDefault();

        const clean = DOMPurify.sanitize(html);

        // insert at cursor
        insertHtmlAtCursor(clean);
      });


      // Accessibility: ensure editor has initial focus when page loaded
      window.addEventListener('load', ()=>{ editor.focus(); });

      // Optional: expose a function to get sanitized HTML (for demo/testing)
      window.getSanitizedContent = function(){
        // we also sanitize the entire innerHTML before returning
        return DOMPurify.sanitize(editor.innerHTML);
      };

    })();
  </script>
</body>
</html>