squibview/examples/example_umd.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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SquibView UMD Example</title>
  <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 14a14 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>">

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

  <!-- Base example styles -->
  <link rel="stylesheet" href="examples.css">

  <!-- External dependencies for advanced features -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">

  <style>
    /* Page-specific styles */
    #editor {
      height: calc(100vh - 120px);
    }
  </style>
</head>
<body>
  <div class="example-header">
    <h1 class="example-title">SquibView Manual Dependencies Example (UMD)</h1>
    <div class="example-version" id="version-display"></div>
    <p class="example-description">
      Standard build with manual dependency management. All libraries are loaded via script tags before SquibView.
    </p>
  </div>

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

  <!-- Manually load all external libraries (loaded before SquibView) -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10.9.0/dist/mermaid.min.js"></script>
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script src="https://unpkg.com/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
  <script src="https://unpkg.com/three@0.171.0/build/three.min.js"></script>

  <!-- SquibView UMD build - using same build as autoload examples -->
  <script src="../dist/squibview.umd.min.js"></script>

  <script>
    // Configure Leaflet icons
    if (typeof L !== 'undefined') {
      delete L.Icon.Default.prototype._getIconUrl;
      L.Icon.Default.mergeOptions({
        iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
        iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
        shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png'
      });
    }

    // Initialize mermaid
    mermaid.initialize({ startOnLoad: false });

    // Wait for DOM to be ready
    document.addEventListener('DOMContentLoaded', async function() {
      // Set version display from the library
      if (SquibView.version && SquibView.version.version) {
        document.getElementById("version-display").textContent = `Version ${SquibView.version.version}`;
      }
      try {
        // Create SquibView instance with autoload DISABLED
        // All dependencies have been loaded manually via script tags
        const editor = new SquibView('#editor', {
          initialView: 'split',
          showControls: true,
          titleShow: false,
          autoload_deps: null  // Explicitly disabled - we loaded everything manually
        });

        // Load sample content
        const response = await fetch('./sample-content.md');
        const content = await response.text();
        editor.setContent(content, 'md');

        // Make editor available globally for debugging
        window.editor = editor;

        console.log('SquibView initialized successfully');
      } catch (error) {
        console.error('Failed to initialize SquibView:', error);
        document.getElementById('editor').innerHTML = `
          <div style="padding: 20px; color: red;">
            Failed to initialize: ${error.message}
          </div>
        `;
      }
    });
  </script>
</body>
</html>