Nuno-Editor/editor.html at main · dimm999/Nuno-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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="vendor/milkdown-bundle.css">
<style>
  @font-face { font-family: 'Roboto Flex'; src: url('fonts/RobotoFlexVt.ttf') format('truetype'); }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background: #fff; height: 100vh; overflow: hidden; }

  #container { height: calc(100vh - 28px); display: flex; }
  #editor-pane { flex: 1; overflow: hidden; display: flex; flex-direction: column; align-items: center; }
  #editor-root { width: 900px; max-width: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding-top: 48px; }
  #editor-root::-webkit-scrollbar { display: none; }

  .milkdown { outline: none; max-width: 900px; margin: 0 auto; overflow: visible; padding-bottom: 200px; font-family: 'Roboto Flex', sans-serif; font-size: 1.25rem; font-weight: 400; line-height: 1.85; font-feature-settings: "calt" 1, "liga" 1, "pnum" 1; --crepe-color-outline: #007AFF; --crepe-color-selected: #C2E8FF; --crepe-color-surface: #f7f7f7; --crepe-color-hover: #f0f0f0; }
  .milkdown .ProseMirror { caret-color: #007AFF; }
  .milkdown .ProseMirror .ProseMirror-virtual-cursor { width: 3px !important; }
  .milkdown .ProseMirror-focused .ProseMirror-gapcursor::after { border-top-width: 3px; }
  .milkdown .ProseMirror p { font-size: 1.25rem; line-height: 1.85; padding: 0.25em 0; }
  .milkdown .ProseMirror h1 { font-size: 2.625rem; line-height: 1.2; }
  .milkdown .ProseMirror h2 { font-size: 2.25rem; line-height: 1.25; }
  .milkdown .ProseMirror h3 { font-size: 1.875rem; line-height: 1.3; }
  .milkdown .ProseMirror h4 { font-size: 1.5rem; line-height: 1.35; }
  .milkdown .ProseMirror h5 { font-size: 1.25rem; line-height: 1.4; }
  .milkdown .ProseMirror h6 { font-size: 1rem; line-height: 1.5; }
  .milkdown .milkdown-block-handle { transition: none !important; }
  .milkdown .ProseMirror-gapcursor { transition: none !important; }
  .milkdown .milkdown-slash-menu { max-height: min(420px, 70vh) !important; background: #f7f7f7 !important; overflow-y: auto !important; }
  .milkdown .milkdown-toolbar { background: #f7f7f7 !important; }
  .milkdown .ProseMirror { -webkit-user-select: text; }
  .milkdown .milkdown-block-handle .operation-item:hover { background: #f7f7f7 !important; }

  #status-bar { height: 28px; background: #f9fafb; border-top: 1px solid #e5e7eb; display: flex; align-items: center; padding: 0 16px; gap: 16px; font-size: 12px; color: #6b7280; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; flex-shrink: 0; }
  #status-bar .spacer { flex: 1; }
  #status-bar .saved { color: #16a34a; display: flex; align-items: center; gap: 4px; }
  #status-bar .not-saved { color: #374151; }
  #status-bar .file-name { color: #374151; font-weight: 500; }
  #status-bar .stats { display: flex; gap: 12px; }

</style>
</head>
<body>

<div id="container">
  <div id="editor-pane">
    <div id="editor-root"></div>
  </div>
</div>
<div id="status-bar">
  <span class="file-name" id="status-filename"></span>
  <span class="spacer"></span>
  <span class="stats">
    <span id="status-words">0 words</span>
    <span id="status-chars">0 chars</span>
  </span>
  <span id="status-saved" class="not-saved">Not Saved</span>
</div>

<script src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script src="vendor/milkdown-bundle.js"></script>
<script>
new QWebChannel(qt.webChannelTransport, function(channel) {
  window.bridge = channel.objects.bridge;
});
var editor = window.createEditor(document.getElementById("editor-root"), window._initialContent || "");

document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
  var existing = document.getElementById('ctx-menu');
  if (existing) existing.remove();

  var sel = window.getSelection().toString();
  var menu = document.createElement('div');
  menu.id = 'ctx-menu';
  menu.style.cssText = 'position:fixed;z-index:9999;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:4px;box-shadow:0 4px 16px rgba(0,0,0,0.12);font-size:13px;font-family:system-ui;color:#000;min-width:160px;left:'+e.clientX+'px;top:'+e.clientY+'px;';

  function addItem(label, action) {
    var item = document.createElement('div');
    item.textContent = label;
    item.style.cssText = 'padding:6px 12px;border-radius:4px;cursor:pointer;';
    item.onmouseenter = function() { item.style.background = '#f3f4f6'; };
    item.onmouseleave = function() { item.style.background = 'transparent'; };
    item.onclick = function() { menu.remove(); action(); };
    menu.appendChild(item);
  }

  function addSep() {
    var s = document.createElement('div');
    s.style.cssText = 'height:1px;background:#e5e7eb;margin:4px 8px;';
    menu.appendChild(s);
  }

  if (sel) {
    addItem('Copy', function() { document.execCommand('copy'); });
    addSep();
  }
  addItem('Cut', function() { document.execCommand('cut'); });
  addItem('Copy', function() { document.execCommand('copy'); });
  addItem('Paste', function() { document.execCommand('paste'); });
  addSep();
  addItem('Select All', function() { document.execCommand('selectAll'); });

  document.body.appendChild(menu);

  function closeMenu(ev) {
    if (!menu.contains(ev.target)) { menu.remove(); document.removeEventListener('click', closeMenu); }
  }
  setTimeout(function() { document.addEventListener('click', closeMenu); }, 0);
});
</script>
</body>
</html>