squibview/examples/example_selection_api.html at main · deftio/squibview · 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SquibView - Selection API Example</title>
    <!-- Required dependencies for SquibView ESM -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.3.2/markdown-it.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
    <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
    <link rel="icon"
    href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='14' fill='%23f57c00' stroke='%23000' stroke-width='1'/><path d='M2 16h28M16 2a14 14 0 0114 14 14 14 0 01-14 14 14 14 0 01-14-14A14 14 0 0116 2zm0 0v28M9 16a7 7 0 0014 0 7 7 0 00-14 0z' fill='none' stroke='%23000' stroke-width='1'/></svg>">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">

    <!-- SquibView CSS -->
    <link rel="stylesheet" href="../dist/squibview.css">

  <!-- Shared example styles -->
  <link rel="stylesheet" href="examples.css">
    <style>
        body { font-family: sans-serif; margin: 20px; background-color: #f4f4f4; }
        #editor-container { height: 400px; margin-bottom: 20px; }
        .controls { margin-bottom: 20px; padding: 10px; background-color: #fff; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .controls-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; /* New style for grouping buttons */}
        .controls button, .controls input { /*margin-right: 10px;*/ padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; }
        .controls input { cursor: text; flex-grow: 1; /* Allow input to take more space */ }
        .controls button:hover { background-color: #f0f0f0; }
        #selection-info-container { margin-bottom: 20px; } /* Renamed for clarity */
        #selection-info { margin-top: 5px; padding: 10px; border: 1px solid #eee; background-color: #f9f9f9; border-radius: 4px; white-space: pre-wrap; font-family: monospace; min-height: 50px; }
        .info-label { font-weight: bold; display: block; margin-bottom: 5px; }
        .note { font-size: 0.9em; color: #555; margin-top: 5px; display: block;}
    </style>
</head>
<body>

    <h1>SquibView - Selection API Example</h1>
    <p>Select text in either the source (left) or rendered (right) panel to see selection data update automatically. Use the buttons to interact with the selection.</p>

    <div id="editor-container"></div>

    <div id="selection-info-container" class="controls"> <!-- Changed class to controls for consistent styling -->
        <span class="info-label">Selection Info (updates on selection change):</span>
        <div id="selection-info">No selection yet.</div>
        <small class="note">
            - `selectionRange` is most relevant for the source panel (textarea).
            - `element` refers to the DOM element where the selection occurred (source textarea or output div).
        </small>
    </div>

    <div class="controls">
        <div class="controls-group">
            <button id="btn-get-current">Get Current Selection</button>
            <input type="text" id="input-replace-text" value="**text to replace with**" title="Text to replace selection with">
            <button id="btn-replace-text">Replace Selected</button>
            <button id="btn-clear-selection">Clear Selection</button>
        </div>
        <!-- <hr style="margin: 10px 0;"> -->
        <!-- <div class="controls-group">
            <button id="btn-selection-readonly">Make Read-only</button>
            <button id="btn-selection-editable">Make Editable</button>
            <button id="btn-toggle-lock">Toggle Lock</button>
        </div> -->
    </div>

    <script type="module">
        import SquibView from '../dist/squibview.esm.min.js';

        const initialContent = `## Selection API Demo\n\nSelect some text here in the **source panel**.\n\nOr, select some *rendered text* over on the right.\n\n- List item 1\n- List item 2\n\n---\n\n\`\`\`javascript\nfunction hello() {\n  console.log(\"Hello, SquibView!\");\n}\n\`\`\`\n\n<p>This is an <em>HTML</em> paragraph.</p>\n`;

        const editor = new SquibView('#editor-container', {
            initialContent: initialContent,
            inputContentType: 'md',
            showControls: true, // Show default SquibView controls
            titleShow: true,
            titleContent: "Selection API Demo"
        });

        const selectionInfoDiv = document.getElementById('selection-info');
        let currentSelectionData = null; // To store the latest selection data

        // 1. Listen for selection changes
        editor.onTextSelected((selectionData) => {
            currentSelectionData = selectionData;
            if (selectionData) {
                const displayData = { ...selectionData };
                if (displayData.element) {
                    let details = {
                        tagName: displayData.element.tagName
                    };
                    if (displayData.element === editor.input) { // editor.input is the textarea
                        details.panel = 'source';
                        details.id = displayData.element.id;
                        details.className = displayData.element.className;
                    } else if (displayData.element === editor.output) { // editor.output is the output div
                        details.panel = 'rendered';
                        details.id = displayData.element.id;
                        details.className = displayData.element.className;
                    } else {
                        // It might be an element within the rendered view
                        details.panel = 'rendered (child element)';
                        details.id = displayData.element.id;
                        details.className = displayData.element.className;
                    }
                    displayData.element_details = details;
                }
                // delete displayData.element; // Keep this commented to show element is still there, just stringifies to {}

                selectionInfoDiv.textContent = JSON.stringify(displayData, null, 2);
            } else {
                selectionInfoDiv.textContent = 'Selection cleared or lost.';
                currentSelectionData = null;
            }
        });

        // 2. Manually get current selection
        document.getElementById('btn-get-current').addEventListener('click', () => {
            const selData = editor.getCurrentSelection();
            currentSelectionData = selData; // Update our stored version
            if (selData) {
                const displayData = { ...selData };
                if (displayData.element) {
                    let details = {
                        tagName: displayData.element.tagName
                    };
                    if (displayData.element === editor.input) {
                        details.panel = 'source';
                        details.id = displayData.element.id;
                        details.className = displayData.element.className;
                    } else if (displayData.element === editor.output) {
                        details.panel = 'rendered';
                        details.id = displayData.element.id;
                        details.className = displayData.element.className;
                    } else {
                        details.panel = 'rendered (child element)';
                        details.id = displayData.element.id;
                        details.className = displayData.element.className;
                    }
                    displayData.element_details = details;
                }
                // delete displayData.element;

                selectionInfoDiv.textContent = "Manually Fetched:\\n" + JSON.stringify(displayData, null, 2);
            } else {
                selectionInfoDiv.textContent = 'Manually Fetched: No active selection.';
            }
        });

        // 3. Replace selected text
        document.getElementById('btn-replace-text').addEventListener('click', () => {
            const replacementText = document.getElementById('input-replace-text').value;
            if (currentSelectionData) {
                editor.replaceSelectedText(replacementText, currentSelectionData);
                // The onTextSelected event should fire if the selection changes as a result.
            } else {
                alert("No active selection to replace. Select some text first, or click 'Get Current Selection'.");
            }
        });

        // 4. Clear selection
        document.getElementById('btn-clear-selection').addEventListener('click', () => {
            editor.clearSelection();
            // onTextSelected should fire with null or an empty selection.
            selectionInfoDiv.textContent = 'Selection cleared programmatically.';
            currentSelectionData = null;
        });

    </script>

</body>
</html>