maxi-editor/demo-refactored.html at v2.x · Williamug/maxi-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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Maxi Editor Demo - Refactored</title>
    <link rel="stylesheet" href="./src/maxi-editor.css" />
    <!-- <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"
    /> -->
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 2rem;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
      }
      h1 {
        color: #333;
      }
      .demo-info {
        background: #f0f8ff;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
      }
      .demo-info h3 {
        margin-top: 0;
      }
      #editor-container {
        margin: 20px 0;
      }
      button[type="submit"] {
        margin-top: 15px;
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
      }
      button[type="submit"]:hover {
        background-color: #0056b3;
      }
    </style>
  </head>
  <body>
    <h1>MaxiEditor Demo - v2</h1>

    <div class="demo-info">
      <h3>🎉 New Features in v2:</h3>
      <ul>
        <li>Modular architecture with better code organization</li>
        <li>Color picker UI (no more prompts!)</li>
        <li>Improved modal dialogs for links</li>
        <li>XSS protection with content sanitization</li>
        <li>Keyboard navigation in toolbar</li>
        <li>ARIA labels for accessibility</li>
        <li>Memory leak prevention with cleanup methods</li>
        <li>Debounced history saves</li>
        <li>Better error handling</li>
      </ul>
    </div>

    <form>
      <textarea id="comment" name="comment" style="display: none"></textarea>
      <div id="editor"></div>
      <button type="submit">Submit</button>
    </form>

    <script type="module">
      import MaxiEditor from "./src/index.js";
      import { HighlightPlugin, InsertLinkPlugin, StrikeThroughPlugin, TablePlugin, TextColorPlugin, BackgroundColorPlugin, ImageUploadPlugin } from "./src/index.js";

      const editor = MaxiEditor.set("#editor", {
        toolbar: [
          "headingSelector",
          "fontSelector",
          "bold",
          "italic",
          "underline",
          "highlight",
          "strikethrough",
          "justifyLeft",
          "justifyCenter",
          "justifyRight",
          "insertUnorderedList",
          "insertOrderedList",
          "insertLink",
          "insertImage",
          "table",
          "indent",
          "outdent",
          "undo",
          "redo",
        ],
        height: "400px",
        placeholder: "Type here to test the refactored editor...",
        plugins: [HighlightPlugin, InsertLinkPlugin, StrikeThroughPlugin, TablePlugin, TextColorPlugin, BackgroundColorPlugin, ImageUploadPlugin],
      });

      document
        .querySelector("form")
        .addEventListener("submit", function (event) {
          event.preventDefault();

          // Get the content from the editor
          const editorContent = editor.getContent();

          // Set the value of the hidden textarea
          document.querySelector("#comment").value = editorContent;

          // Get stats
          const stats = editor.getStats();

          // Show results
          alert(`Content submitted!\n\nStats:\n- Characters: ${stats.characters}\n- Words: ${stats.words}\n- Paragraphs: ${stats.paragraphs}`);

          console.log("Editor content:", editorContent);
          console.log("Stats:", stats);
        });
    </script>
  </body>
</html>