@textbus/xnote 0.0.1-alpha.1 → 0.0.1-alpha.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/bundles/components/dropdown/dropdown.d.ts +1 -0
  2. package/bundles/editor.d.ts +15 -4
  3. package/bundles/fonts/textbus.svg +108 -0
  4. package/bundles/fonts/textbus.ttf +0 -0
  5. package/bundles/fonts/textbus.woff +0 -0
  6. package/bundles/index.css +24 -0
  7. package/bundles/index.esm.css +24 -0
  8. package/bundles/index.esm.js +663 -961
  9. package/bundles/index.js +659 -957
  10. package/bundles/interfaces.d.ts +3 -0
  11. package/bundles/plugins/_common/attr.tool.d.ts +2 -2
  12. package/bundles/plugins/_common/color.tool.d.ts +2 -2
  13. package/bundles/plugins/left-toolbar/insert-tool.d.ts +4 -2
  14. package/bundles/textbus/components/blockqoute/blockquote.component.d.ts +1 -1
  15. package/bundles/textbus/components/root/root.component.d.ts +0 -2
  16. package/bundles/textbus/components/source-code/source-code.component.d.ts +1 -0
  17. package/bundles/textbus/components/table/components/resize-column.d.ts +2 -1
  18. package/bundles/textbus/components/table/components/top-bar.d.ts +1 -0
  19. package/package.json +11 -10
package/bundles/index.js CHANGED
@@ -11,36 +11,7 @@ var highlightjs = require('highlight.js');
11
11
  var adapterViewfly = require('@textbus/adapter-viewfly');
12
12
  var collaborate = require('@textbus/collaborate');
13
13
 
14
- function styleInject(css, ref) {
15
- if ( ref === void 0 ) ref = {};
16
- var insertAt = ref.insertAt;
17
-
18
- if (!css || typeof document === 'undefined') { return; }
19
-
20
- var head = document.head || document.getElementsByTagName('head')[0];
21
- var style = document.createElement('style');
22
- style.type = 'text/css';
23
-
24
- if (insertAt === 'top') {
25
- if (head.firstChild) {
26
- head.insertBefore(style, head.firstChild);
27
- } else {
28
- head.appendChild(style);
29
- }
30
- } else {
31
- head.appendChild(style);
32
- }
33
-
34
- if (style.styleSheet) {
35
- style.styleSheet.cssText = css;
36
- } else {
37
- style.appendChild(document.createTextNode(css));
38
- }
39
- }
40
-
41
- var css_248z$v = ".btn[vf-69b4db]{align-items:center;background:none;background:#fff;border:none;border-radius:4px;cursor:pointer;display:inline-flex;font-size:inherit;height:28px;outline:none;padding:6px 5px;transition:all .2s}.btn>span[vf-69b4db]{white-space:nowrap}.btn[vf-69b4db]:hover{background:rgba(0,0,0,.1)}.btn-arrow[vf-69b4db]{position:relative;transform:rotate(0);transform-origin:50%;width:1em}.btn.active[vf-69b4db]{background:rgba(0,0,0,.1)}.btn.active .btn-arrow[vf-69b4db]{transform:rotate(180deg)}.btn.highlight[vf-69b4db]{background-color:rgba(41,110,255,.063);color:#296eff}";
42
- var scopedId$k = "vf-69b4db";
43
- styleInject(css_248z$v);
14
+ var scopedId$k = "vf-3d0183";
44
15
 
45
16
  /******************************************************************************
46
17
  Copyright (c) Microsoft Corporation.
@@ -70,16 +41,6 @@ function __metadata(metadataKey, metadataValue) {
70
41
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
71
42
  }
72
43
 
73
- function __awaiter(thisArg, _arguments, P, generator) {
74
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
75
- return new (P || (P = Promise))(function (resolve, reject) {
76
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
77
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
78
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
79
- step((generator = generator.apply(thisArg, _arguments || [])).next());
80
- });
81
- }
82
-
83
44
  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
84
45
  var e = new Error(message);
85
46
  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -87,18 +48,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
87
48
 
88
49
  exports.DropdownService = class DropdownService {
89
50
  constructor() {
90
- Object.defineProperty(this, "onSiblingOpen", {
91
- enumerable: true,
92
- configurable: true,
93
- writable: true,
94
- value: void 0
95
- });
96
- Object.defineProperty(this, "siblingOpenEvent", {
97
- enumerable: true,
98
- configurable: true,
99
- writable: true,
100
- value: new core$1.Subject()
101
- });
51
+ this.siblingOpenEvent = new core$1.Subject();
102
52
  this.onSiblingOpen = this.siblingOpenEvent.asObservable();
103
53
  }
104
54
  notify(id) {
@@ -116,60 +66,14 @@ var DropdownContextService_1;
116
66
  let i = 0;
117
67
  exports.DropdownContextService = DropdownContextService_1 = class DropdownContextService {
118
68
  constructor(dropdownService, injector) {
119
- Object.defineProperty(this, "dropdownService", {
120
- enumerable: true,
121
- configurable: true,
122
- writable: true,
123
- value: dropdownService
124
- });
125
- Object.defineProperty(this, "injector", {
126
- enumerable: true,
127
- configurable: true,
128
- writable: true,
129
- value: injector
130
- });
131
- Object.defineProperty(this, "id", {
132
- enumerable: true,
133
- configurable: true,
134
- writable: true,
135
- value: i
136
- });
137
- Object.defineProperty(this, "isOpen", {
138
- enumerable: true,
139
- configurable: true,
140
- writable: true,
141
- value: false
142
- });
143
- Object.defineProperty(this, "onOpenStateChange", {
144
- enumerable: true,
145
- configurable: true,
146
- writable: true,
147
- value: void 0
148
- });
149
- Object.defineProperty(this, "canHide", {
150
- enumerable: true,
151
- configurable: true,
152
- writable: true,
153
- value: true
154
- });
155
- Object.defineProperty(this, "openStateChangeEvent", {
156
- enumerable: true,
157
- configurable: true,
158
- writable: true,
159
- value: new core$1.Subject()
160
- });
161
- Object.defineProperty(this, "timer", {
162
- enumerable: true,
163
- configurable: true,
164
- writable: true,
165
- value: null
166
- });
167
- Object.defineProperty(this, "parentDropdownContextService", {
168
- enumerable: true,
169
- configurable: true,
170
- writable: true,
171
- value: this.injector.get(DropdownContextService_1, core.InjectFlags.SkipSelf, null)
172
- });
69
+ this.dropdownService = dropdownService;
70
+ this.injector = injector;
71
+ this.id = i;
72
+ this.isOpen = false;
73
+ this.canHide = true;
74
+ this.openStateChangeEvent = new core$1.Subject();
75
+ this.timer = null;
76
+ this.parentDropdownContextService = this.injector.get(DropdownContextService_1, null, core.InjectFlags.SkipSelf);
173
77
  this.onOpenStateChange = this.openStateChangeEvent.asObservable();
174
78
  dropdownService.onSiblingOpen.subscribe(id => {
175
79
  if (id === this.id) {
@@ -218,7 +122,7 @@ exports.DropdownContextService = DropdownContextService_1 = __decorate([
218
122
  ], exports.DropdownContextService);
219
123
 
220
124
  function Button(props) {
221
- const dropdownContextService = core.inject(exports.DropdownContextService, core.InjectFlags.Optional, null);
125
+ const dropdownContextService = core.inject(exports.DropdownContextService, null);
222
126
  const isActive = core.createSignal((dropdownContextService === null || dropdownContextService === void 0 ? void 0 : dropdownContextService.isOpen) || false);
223
127
  if (dropdownContextService) {
224
128
  const subscription = dropdownContextService.onOpenStateChange.subscribe(b => {
@@ -240,9 +144,7 @@ function Button(props) {
240
144
  });
241
145
  }
242
146
 
243
- var css_248z$u = ".component-toolbar[vf-ac7e8d]{position:relative;z-index:3}.toolbar[vf-ac7e8d]{background:#fff;border:1px solid #dee0e3;border-radius:5px;bottom:10px;box-shadow:0 4px 8px rgba(0,0,0,.08);box-sizing:border-box;display:flex;font-size:14px;height:36px;opacity:0;padding:0 6px;pointer-events:none;position:absolute;text-align:left;transform:translateY(10px)}.toolbar.active[vf-ac7e8d]{opacity:1;pointer-events:auto;transform:translateY(0);transition-duration:.2s;transition-property:all;transition-timing-function:ease}";
244
147
  var scopedId$j = "vf-ac7e8d";
245
- styleInject(css_248z$u);
246
148
 
247
149
  function ComponentToolbar(props) {
248
150
  return scopedCss.withScopedCSS(scopedId$j, () => {
@@ -255,9 +157,7 @@ function ComponentToolbar(props) {
255
157
  });
256
158
  }
257
159
 
258
- var css_248z$t = ".divider[vf-ede279]{border-top:1px solid #eee;margin:6px 0}";
259
160
  var scopedId$i = "vf-ede279";
260
- styleInject(css_248z$t);
261
161
 
262
162
  function Divider() {
263
163
  return scopedCss.withScopedCSS(scopedId$i, () => {
@@ -265,9 +165,7 @@ function Divider() {
265
165
  });
266
166
  }
267
167
 
268
- var css_248z$s = ".drag-resize[vf-4c1803]{position:relative;width:100%}.drag-resize .resize-tool[vf-4c1803]{align-items:center;border:1px dashed #296eff;display:none;height:100%;justify-content:center;left:0;pointer-events:none;position:absolute;top:0;width:100%}.drag-resize .resize-tool.active[vf-4c1803]{display:flex}.drag-resize .mask[vf-4c1803]{background-color:rgba(0,0,0,.8);border-radius:3px;color:#fff;font-size:14px;padding:3px 8px;position:relative;text-shadow:1px 2px 3px rgba(0,0,0,.7);white-space:nowrap;z-index:10}.drag-resize .btn-group[vf-4c1803]{height:100%;left:0;position:absolute;top:0;width:100%}.drag-resize button[vf-4c1803]{background:#fff;border:2px solid #296eff;border-radius:50%;box-sizing:border-box;cursor:pointer;font-size:0;height:14px;outline:none;padding:0;pointer-events:auto;position:absolute;width:14px}.drag-resize button[vf-4c1803]:hover{background-color:#fff;box-shadow:0 0 0 3px rgba(18,150,219,.3)}.drag-resize button[vf-4c1803]:first-child,.drag-resize button[vf-4c1803]:nth-child(2),.drag-resize button[vf-4c1803]:nth-child(3){margin-top:-5px;top:0}.drag-resize button[vf-4c1803]:nth-child(3),.drag-resize button[vf-4c1803]:nth-child(4),.drag-resize button[vf-4c1803]:nth-child(5){margin-right:-5px;right:0}.drag-resize button[vf-4c1803]:nth-child(5),.drag-resize button[vf-4c1803]:nth-child(6),.drag-resize button[vf-4c1803]:nth-child(7){bottom:0;margin-bottom:-5px}.drag-resize button[vf-4c1803]:first-child,.drag-resize button[vf-4c1803]:nth-child(7),.drag-resize button[vf-4c1803]:nth-child(8){left:0;margin-left:-5px}.drag-resize button[vf-4c1803]:nth-child(2),.drag-resize button[vf-4c1803]:nth-child(6){left:50%;margin-left:-5px}.drag-resize button[vf-4c1803]:nth-child(4),.drag-resize button[vf-4c1803]:nth-child(8){margin-top:-5px;top:50%}.drag-resize button[vf-4c1803]:first-child{cursor:nw-resize}.drag-resize button[vf-4c1803]:nth-child(2){cursor:n-resize}.drag-resize button[vf-4c1803]:nth-child(3){cursor:ne-resize}.drag-resize button[vf-4c1803]:nth-child(4){cursor:e-resize}.drag-resize button[vf-4c1803]:nth-child(5){cursor:se-resize}.drag-resize button[vf-4c1803]:nth-child(6){cursor:s-resize}.drag-resize button[vf-4c1803]:nth-child(7){cursor:sw-resize}.drag-resize button[vf-4c1803]:nth-child(8){cursor:w-resize}";
269
168
  var scopedId$h = "vf-4c1803";
270
- styleInject(css_248z$s);
271
169
 
272
170
  function DragResize(props) {
273
171
  const isShow = core.createSignal(false);
@@ -382,13 +280,9 @@ function DragResize(props) {
382
280
  });
383
281
  }
384
282
 
385
- var css_248z$r = ".dropdown[vf-a99c5e]{display:inline-block;position:relative}.dropdown[vf-a99c5e]:hover{z-index:1}.dropdown-btn[vf-a99c5e]{display:flex;width:100%}.dropdown-btn-inner[vf-a99c5e]{flex:1}";
386
283
  var scopedId$g = "vf-a99c5e";
387
- styleInject(css_248z$r);
388
284
 
389
- var css_248z$q = ".dropdown-menu[vf-4f8cfb]{background:#fff;border:1px solid #ddd;border-radius:5px;box-shadow:2px 3px 5px rgba(0,0,0,.1);height:0;left:-10px;opacity:0;overflow-y:auto;position:fixed;top:100%;transition-duration:0s;transition:transform .3s,opacity .3s;user-select:none;width:200px;z-index:10}.dropdown-menu-content[vf-4f8cfb]{padding:6px}";
390
- var scopedId$f = "vf-4f8cfb";
391
- styleInject(css_248z$q);
285
+ var scopedId$f = "vf-ab6f55";
392
286
 
393
287
  const DropdownMenuPortal = core.withAnnotation({
394
288
  providers: [
@@ -442,7 +336,7 @@ const DropdownMenuPortal = core.withAnnotation({
442
336
  menuElement.style.left = triggerRect.left + 'px';
443
337
  if (isToTop) {
444
338
  const maxHeight = Math.max(menuElement.scrollHeight, menuElement.offsetHeight);
445
- const height = Math.min(triggerRect.top - 20, maxHeight);
339
+ const height = Math.min(triggerRect.top - 20, maxHeight, 400);
446
340
  menuElement.style.height = height + 'px';
447
341
  menuElement.style.top = triggerRect.top - 20 - height + 'px';
448
342
  timer = setTimeout(() => {
@@ -495,6 +389,8 @@ const Dropdown = core.withAnnotation({
495
389
  const dropdownRef = core.createRef();
496
390
  core.onMounted(() => {
497
391
  const sub = dropdownContextService.onOpenStateChange.subscribe(b => {
392
+ var _a;
393
+ (_a = props.onExpendStateChange) === null || _a === void 0 ? void 0 : _a.call(props, b);
498
394
  isShow.set(b);
499
395
  });
500
396
  return () => sub.unsubscribe();
@@ -548,12 +444,10 @@ const Dropdown = core.withAnnotation({
548
444
  };
549
445
  });
550
446
 
551
- var css_248z$p = ".menu-item[vf-64f71d]{border-radius:4px;cursor:pointer;display:flex;font-size:14px;height:26px;justify-content:space-between;line-height:26px;padding:2px 10px;transition:background-color .2s}.menu-item.disabled[vf-64f71d]{cursor:not-allowed;opacity:.5}.menu-item[vf-64f71d]:hover{background:#eee}.menu-item.active[vf-64f71d]{background:rgba(0,0,0,.1)}.menu-icon[vf-64f71d]{display:inline-block;width:1.8em}.menu-check[vf-64f71d]{display:none}.menu-check.checked[vf-64f71d]{color:#296eff;display:block}";
552
- var scopedId$e = "vf-64f71d";
553
- styleInject(css_248z$p);
447
+ var scopedId$e = "vf-678daa";
554
448
 
555
449
  function MenuItem(props) {
556
- const dropdownContextService = core.inject(exports.DropdownContextService, core.InjectFlags.Optional, null);
450
+ const dropdownContextService = core.inject(exports.DropdownContextService, null);
557
451
  const isActive = core.createSignal((dropdownContextService === null || dropdownContextService === void 0 ? void 0 : dropdownContextService.isOpen) || false);
558
452
  if (dropdownContextService) {
559
453
  const subscription = dropdownContextService.onOpenStateChange.subscribe(b => {
@@ -580,9 +474,7 @@ function MenuItem(props) {
580
474
  });
581
475
  }
582
476
 
583
- var css_248z$o = ".popup[vf-a23c47]{background:#fff;border:1px solid #ddd;border-radius:5px;box-shadow:2px 3px 5px rgba(0,0,0,.1);overflow:hidden;position:absolute}";
584
477
  var scopedId$d = "vf-a23c47";
585
- styleInject(css_248z$o);
586
478
 
587
479
  function Popup(props) {
588
480
  const host = core.inject(platformBrowser.VIEW_CONTAINER);
@@ -594,9 +486,7 @@ function Popup(props) {
594
486
  }), host);
595
487
  }
596
488
 
597
- var css_248z$n = ".toolbar-item[vf-216815]{padding:3px}";
598
489
  var scopedId$c = "vf-216815";
599
- styleInject(css_248z$n);
600
490
 
601
491
  function ToolbarItem(props) {
602
492
  return scopedCss.withScopedCSS(scopedId$c, () => {
@@ -604,18 +494,11 @@ function ToolbarItem(props) {
604
494
  });
605
495
  }
606
496
 
607
- var css_248z$m = ".heading-icon[vf-2a8a65]{font-size:1.2em;font-weight:700}.heading-icon sub[vf-2a8a65]{font-weight:400}";
608
497
  var scopedId$b = "vf-2a8a65";
609
- styleInject(css_248z$m);
610
498
 
611
499
  exports.RefreshService = class RefreshService {
612
500
  constructor() {
613
- Object.defineProperty(this, "onRefresh", {
614
- enumerable: true,
615
- configurable: true,
616
- writable: true,
617
- value: new core$1.Subject()
618
- });
501
+ this.onRefresh = new core$1.Subject();
619
502
  }
620
503
  };
621
504
  exports.RefreshService = __decorate([
@@ -658,12 +541,6 @@ function registerTextAlignShortcut(textbus) {
658
541
  });
659
542
  }
660
543
 
661
- var css_248z$l = ".xnote-source-code.atom-one-dark pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.atom-one-dark code.hljs{padding:3px 5px}.xnote-source-code.atom-one-dark .hljs{background:#282c34;color:#abb2bf}.xnote-source-code.atom-one-dark .hljs-comment,.xnote-source-code.atom-one-dark .hljs-quote{color:#5c6370;font-style:italic}.xnote-source-code.atom-one-dark .hljs-doctag,.xnote-source-code.atom-one-dark .hljs-formula,.xnote-source-code.atom-one-dark .hljs-keyword{color:#c678dd}.xnote-source-code.atom-one-dark .hljs-deletion,.xnote-source-code.atom-one-dark .hljs-name,.xnote-source-code.atom-one-dark .hljs-section,.xnote-source-code.atom-one-dark .hljs-selector-tag,.xnote-source-code.atom-one-dark .hljs-subst{color:#e06c75}.xnote-source-code.atom-one-dark .hljs-literal{color:#56b6c2}.xnote-source-code.atom-one-dark .hljs-addition,.xnote-source-code.atom-one-dark .hljs-attribute,.xnote-source-code.atom-one-dark .hljs-meta .hljs-string,.xnote-source-code.atom-one-dark .hljs-regexp,.xnote-source-code.atom-one-dark .hljs-string{color:#98c379}.xnote-source-code.atom-one-dark .hljs-attr,.xnote-source-code.atom-one-dark .hljs-number,.xnote-source-code.atom-one-dark .hljs-selector-attr,.xnote-source-code.atom-one-dark .hljs-selector-class,.xnote-source-code.atom-one-dark .hljs-selector-pseudo,.xnote-source-code.atom-one-dark .hljs-template-variable,.xnote-source-code.atom-one-dark .hljs-type,.xnote-source-code.atom-one-dark .hljs-variable{color:#d19a66}.xnote-source-code.atom-one-dark .hljs-bullet,.xnote-source-code.atom-one-dark .hljs-link,.xnote-source-code.atom-one-dark .hljs-meta,.xnote-source-code.atom-one-dark .hljs-selector-id,.xnote-source-code.atom-one-dark .hljs-symbol,.xnote-source-code.atom-one-dark .hljs-title{color:#61aeee}.xnote-source-code.atom-one-dark .hljs-built_in,.xnote-source-code.atom-one-dark .hljs-class .hljs-title,.xnote-source-code.atom-one-dark .hljs-title.class_{color:#e6c07b}.xnote-source-code.atom-one-dark .hljs-emphasis{font-style:italic}.xnote-source-code.atom-one-dark .hljs-strong{font-weight:700}.xnote-source-code.atom-one-dark .hljs-link{text-decoration:underline}.xnote-source-code.foundation pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.foundation code.hljs{padding:3px 5px}.xnote-source-code.foundation .hljs{background:#eee;color:#000}.xnote-source-code.foundation .hljs-addition,.xnote-source-code.foundation .hljs-attribute,.xnote-source-code.foundation .hljs-emphasis,.xnote-source-code.foundation .hljs-link{color:#070}.xnote-source-code.foundation .hljs-emphasis{font-style:italic}.xnote-source-code.foundation .hljs-deletion,.xnote-source-code.foundation .hljs-string,.xnote-source-code.foundation .hljs-strong{color:#d14}.xnote-source-code.foundation .hljs-strong{font-weight:700}.xnote-source-code.foundation .hljs-comment,.xnote-source-code.foundation .hljs-quote{color:#998;font-style:italic}.xnote-source-code.foundation .hljs-section,.xnote-source-code.foundation .hljs-title{color:#900}.xnote-source-code.foundation .hljs-class .hljs-title,.xnote-source-code.foundation .hljs-title.class_,.xnote-source-code.foundation .hljs-type{color:#458}.xnote-source-code.foundation .hljs-template-variable,.xnote-source-code.foundation .hljs-variable{color:#369}.xnote-source-code.foundation .hljs-bullet{color:#970}.xnote-source-code.foundation .hljs-meta{color:#34b}.xnote-source-code.foundation .hljs-code,.xnote-source-code.foundation .hljs-keyword,.xnote-source-code.foundation .hljs-literal,.xnote-source-code.foundation .hljs-number,.xnote-source-code.foundation .hljs-selector-tag{color:#099}.xnote-source-code.foundation .hljs-regexp{background-color:#fff0ff;color:#808}.xnote-source-code.foundation .hljs-symbol{color:#990073}.xnote-source-code.foundation .hljs-name,.xnote-source-code.foundation .hljs-selector-class,.xnote-source-code.foundation .hljs-selector-id,.xnote-source-code.foundation .hljs-tag{color:#070}.xnote-source-code.github{\n /*!\n Theme: GitHub\n Description: Light theme as seen on github.com\n Author: github.com\n Maintainer: @Hirse\n Updated: 2021-05-15\n\n Outdated base version: https://github.com/primer/github-syntax-light\n Current colors taken from GitHub's CSS\n */}.xnote-source-code.github .xnote-source-code-container{border:1px solid #eee}.xnote-source-code.github .xnote-source-code-line-number-bg{background-color:#fafafa}.xnote-source-code.github pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.github code.hljs{padding:3px 5px}.xnote-source-code.github .hljs{background:#fff;color:#24292e}.xnote-source-code.github .hljs-doctag,.xnote-source-code.github .hljs-keyword,.xnote-source-code.github .hljs-meta .hljs-keyword,.xnote-source-code.github .hljs-template-tag,.xnote-source-code.github .hljs-template-variable,.xnote-source-code.github .hljs-type,.xnote-source-code.github .hljs-variable.language_{color:#d73a49}.xnote-source-code.github .hljs-title,.xnote-source-code.github .hljs-title.class_,.xnote-source-code.github .hljs-title.class_.inherited__,.xnote-source-code.github .hljs-title.function_{color:#6f42c1}.xnote-source-code.github .hljs-attr,.xnote-source-code.github .hljs-attribute,.xnote-source-code.github .hljs-literal,.xnote-source-code.github .hljs-meta,.xnote-source-code.github .hljs-number,.xnote-source-code.github .hljs-operator,.xnote-source-code.github .hljs-selector-attr,.xnote-source-code.github .hljs-selector-class,.xnote-source-code.github .hljs-selector-id,.xnote-source-code.github .hljs-variable{color:#005cc5}.xnote-source-code.github .hljs-meta .hljs-string,.xnote-source-code.github .hljs-regexp,.xnote-source-code.github .hljs-string{color:#032f62}.xnote-source-code.github .hljs-built_in,.xnote-source-code.github .hljs-symbol{color:#e36209}.xnote-source-code.github .hljs-code,.xnote-source-code.github .hljs-comment,.xnote-source-code.github .hljs-formula{color:#6a737d}.xnote-source-code.github .hljs-name,.xnote-source-code.github .hljs-quote,.xnote-source-code.github .hljs-selector-pseudo,.xnote-source-code.github .hljs-selector-tag{color:#22863a}.xnote-source-code.github .hljs-subst{color:#24292e}.xnote-source-code.github .hljs-section{color:#005cc5;font-weight:700}.xnote-source-code.github .hljs-bullet{color:#735c0f}.xnote-source-code.github .hljs-emphasis{color:#24292e;font-style:italic}.xnote-source-code.github .hljs-strong{color:#24292e;font-weight:700}.xnote-source-code.github .hljs-addition{background-color:#f0fff4;color:#22863a}.xnote-source-code.github .hljs-deletion{background-color:#ffeef0;color:#b31d28}.xnote-source-code.idea .xnote-source-code-container{border:1px solid #eee}.xnote-source-code.idea .xnote-source-code-line-number-bg{background-color:#fafafa}.xnote-source-code.idea pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.idea code.hljs{padding:3px 5px}.xnote-source-code.idea .hljs{background:#fff;color:#000}.xnote-source-code.idea .hljs-subst,.xnote-source-code.idea .hljs-title{color:#000;font-weight:400}.xnote-source-code.idea .hljs-comment,.xnote-source-code.idea .hljs-quote{color:grey;font-style:italic}.xnote-source-code.idea .hljs-meta{color:olive}.xnote-source-code.idea .hljs-tag{background:#efefef}.xnote-source-code.idea .hljs-keyword,.xnote-source-code.idea .hljs-literal,.xnote-source-code.idea .hljs-name,.xnote-source-code.idea .hljs-section,.xnote-source-code.idea .hljs-selector-class,.xnote-source-code.idea .hljs-selector-id,.xnote-source-code.idea .hljs-selector-tag,.xnote-source-code.idea .hljs-type{color:navy;font-weight:700}.xnote-source-code.idea .hljs-attribute,.xnote-source-code.idea .hljs-link,.xnote-source-code.idea .hljs-number,.xnote-source-code.idea .hljs-regexp{color:#00f;font-weight:700}.xnote-source-code.idea .hljs-link,.xnote-source-code.idea .hljs-number,.xnote-source-code.idea .hljs-regexp{font-weight:400}.xnote-source-code.idea .hljs-string{color:green;font-weight:700}.xnote-source-code.idea .hljs-bullet,.xnote-source-code.idea .hljs-formula,.xnote-source-code.idea .hljs-symbol{background:#d0eded;color:#000;font-style:italic}.xnote-source-code.idea .hljs-doctag{text-decoration:underline}.xnote-source-code.idea .hljs-template-variable,.xnote-source-code.idea .hljs-variable{color:#660e7a}.xnote-source-code.idea .hljs-addition{background:#baeeba}.xnote-source-code.idea .hljs-deletion{background:#ffc8bd}.xnote-source-code.idea .hljs-emphasis{font-style:italic}.xnote-source-code.idea .hljs-strong{font-weight:700}.xnote-source-code.intellij-light .xnote-source-code-container{border:1px solid #eee}.xnote-source-code.intellij-light .xnote-source-code-line-number-bg{background-color:#fafafa}.xnote-source-code.intellij-light pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.intellij-light code.hljs{padding:3px 5px}.xnote-source-code.intellij-light .hljs{background:#fff;color:#000}.xnote-source-code.intellij-light .hljs-subst,.xnote-source-code.intellij-light .hljs-title{color:#000;font-weight:400}.xnote-source-code.intellij-light .hljs-title.function_{color:#7a7a43}.xnote-source-code.intellij-light .hljs-code,.xnote-source-code.intellij-light .hljs-comment,.xnote-source-code.intellij-light .hljs-quote{color:#8c8c8c;font-style:italic}.xnote-source-code.intellij-light .hljs-meta{color:#9e880d}.xnote-source-code.intellij-light .hljs-section{color:#871094}.xnote-source-code.intellij-light .hljs-built_in,.xnote-source-code.intellij-light .hljs-keyword,.xnote-source-code.intellij-light .hljs-literal,.xnote-source-code.intellij-light .hljs-meta .hljs-keyword,.xnote-source-code.intellij-light .hljs-name,.xnote-source-code.intellij-light .hljs-selector-attr,.xnote-source-code.intellij-light .hljs-selector-class,.xnote-source-code.intellij-light .hljs-selector-id,.xnote-source-code.intellij-light .hljs-selector-pseudo,.xnote-source-code.intellij-light .hljs-selector-tag,.xnote-source-code.intellij-light .hljs-symbol,.xnote-source-code.intellij-light .hljs-template-tag,.xnote-source-code.intellij-light .hljs-type,.xnote-source-code.intellij-light .hljs-variable.language_{color:#0033b3}.xnote-source-code.intellij-light .hljs-attr,.xnote-source-code.intellij-light .hljs-property{color:#871094}.xnote-source-code.intellij-light .hljs-attribute{color:#174ad4}.xnote-source-code.intellij-light .hljs-number{color:#1750eb}.xnote-source-code.intellij-light .hljs-regexp{color:#264eff}.xnote-source-code.intellij-light .hljs-link{color:#006dcc;text-decoration:underline}.xnote-source-code.intellij-light .hljs-meta .hljs-string,.xnote-source-code.intellij-light .hljs-string{color:#067d17}.xnote-source-code.intellij-light .hljs-char.escape_{color:#0037a6}.xnote-source-code.intellij-light .hljs-doctag{text-decoration:underline}.xnote-source-code.intellij-light .hljs-template-variable{color:#248f8f}.xnote-source-code.intellij-light .hljs-addition{background:#bee6be}.xnote-source-code.intellij-light .hljs-deletion{background:#d6d6d6}.xnote-source-code.intellij-light .hljs-emphasis{font-style:italic}.xnote-source-code.intellij-light .hljs-strong{font-weight:700}.xnote-source-code.intellij-light .hljs-bullet,.xnote-source-code.intellij-light .hljs-formula,.xnote-source-code.intellij-light .hljs-operator,.xnote-source-code.intellij-light .hljs-params,.xnote-source-code.intellij-light .hljs-punctuation,.xnote-source-code.intellij-light .hljs-tag,.xnote-source-code.intellij-light .hljs-title.class_,.xnote-source-code.intellij-light .hljs-title.class_.inherited__,.xnote-source-code.intellij-light .hljs-variable,.xnote-source-code.stackoverflow-light{\n /*!\n Theme: StackOverflow Light\n Description: Light theme as used on stackoverflow.com\n Author: stackoverflow.com\n Maintainer: @Hirse\n Website: https://github.com/StackExchange/Stacks\n License: MIT\n Updated: 2021-05-15\n\n Updated for @stackoverflow/stacks v0.64.0\n Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less\n Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less\n */}.xnote-source-code.stackoverflow-light pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.stackoverflow-light code.hljs{padding:3px 5px}.xnote-source-code.stackoverflow-light .hljs{background:#f6f6f6;color:#2f3337}.xnote-source-code.stackoverflow-light .hljs-subst{color:#2f3337}.xnote-source-code.stackoverflow-light .hljs-comment{color:#656e77}.xnote-source-code.stackoverflow-light .hljs-attr,.xnote-source-code.stackoverflow-light .hljs-doctag,.xnote-source-code.stackoverflow-light .hljs-keyword,.xnote-source-code.stackoverflow-light .hljs-meta .hljs-keyword,.xnote-source-code.stackoverflow-light .hljs-section,.xnote-source-code.stackoverflow-light .hljs-selector-tag{color:#015692}.xnote-source-code.stackoverflow-light .hljs-attribute{color:#803378}.xnote-source-code.stackoverflow-light .hljs-name,.xnote-source-code.stackoverflow-light .hljs-number,.xnote-source-code.stackoverflow-light .hljs-quote,.xnote-source-code.stackoverflow-light .hljs-selector-id,.xnote-source-code.stackoverflow-light .hljs-template-tag,.xnote-source-code.stackoverflow-light .hljs-type{color:#b75501}.xnote-source-code.stackoverflow-light .hljs-selector-class{color:#015692}.xnote-source-code.stackoverflow-light .hljs-link,.xnote-source-code.stackoverflow-light .hljs-regexp,.xnote-source-code.stackoverflow-light .hljs-selector-attr,.xnote-source-code.stackoverflow-light .hljs-string,.xnote-source-code.stackoverflow-light .hljs-symbol,.xnote-source-code.stackoverflow-light .hljs-template-variable,.xnote-source-code.stackoverflow-light .hljs-variable{color:#54790d}.xnote-source-code.stackoverflow-light .hljs-meta,.xnote-source-code.stackoverflow-light .hljs-selector-pseudo{color:#015692}.xnote-source-code.stackoverflow-light .hljs-built_in,.xnote-source-code.stackoverflow-light .hljs-literal,.xnote-source-code.stackoverflow-light .hljs-title{color:#b75501}.xnote-source-code.stackoverflow-light .hljs-bullet,.xnote-source-code.stackoverflow-light .hljs-code{color:#535a60}.xnote-source-code.stackoverflow-light .hljs-meta .hljs-string{color:#54790d}.xnote-source-code.stackoverflow-light .hljs-deletion{color:#c02d2e}.xnote-source-code.stackoverflow-light .hljs-addition{color:#2f6f44}.xnote-source-code.stackoverflow-light .hljs-emphasis{font-style:italic}.xnote-source-code.stackoverflow-light .hljs-strong{font-weight:700}.xnote-source-code.vs2015 pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.vs2015 code.hljs{padding:3px 5px}.xnote-source-code.vs2015 .hljs{background:#1e1e1e;color:#dcdcdc}.xnote-source-code.vs2015 .hljs-keyword,.xnote-source-code.vs2015 .hljs-literal,.xnote-source-code.vs2015 .hljs-name,.xnote-source-code.vs2015 .hljs-symbol{color:#569cd6}.xnote-source-code.vs2015 .hljs-link{color:#569cd6;text-decoration:underline}.xnote-source-code.vs2015 .hljs-built_in,.xnote-source-code.vs2015 .hljs-type{color:#4ec9b0}.xnote-source-code.vs2015 .hljs-class,.xnote-source-code.vs2015 .hljs-number{color:#b8d7a3}.xnote-source-code.vs2015 .hljs-meta .hljs-string,.xnote-source-code.vs2015 .hljs-string{color:#d69d85}.xnote-source-code.vs2015 .hljs-regexp,.xnote-source-code.vs2015 .hljs-template-tag{color:#9a5334}.xnote-source-code.vs2015 .hljs-formula,.xnote-source-code.vs2015 .hljs-function,.xnote-source-code.vs2015 .hljs-params,.xnote-source-code.vs2015 .hljs-subst,.xnote-source-code.vs2015 .hljs-title{color:#dcdcdc}.xnote-source-code.vs2015 .hljs-comment,.xnote-source-code.vs2015 .hljs-quote{color:#57a64a;font-style:italic}.xnote-source-code.vs2015 .hljs-doctag{color:#608b4e}.xnote-source-code.vs2015 .hljs-meta,.xnote-source-code.vs2015 .hljs-meta .hljs-keyword,.xnote-source-code.vs2015 .hljs-tag{color:#9b9b9b}.xnote-source-code.vs2015 .hljs-template-variable,.xnote-source-code.vs2015 .hljs-variable{color:#bd63c5}.xnote-source-code.vs2015 .hljs-attr,.xnote-source-code.vs2015 .hljs-attribute{color:#9cdcfe}.xnote-source-code.vs2015 .hljs-section{color:gold}.xnote-source-code.vs2015 .hljs-emphasis{font-style:italic}.xnote-source-code.vs2015 .hljs-strong{font-weight:700}.xnote-source-code.vs2015 .hljs-bullet,.xnote-source-code.vs2015 .hljs-selector-attr,.xnote-source-code.vs2015 .hljs-selector-class,.xnote-source-code.vs2015 .hljs-selector-id,.xnote-source-code.vs2015 .hljs-selector-pseudo,.xnote-source-code.vs2015 .hljs-selector-tag{color:#d7ba7d}.xnote-source-code.vs2015 .hljs-addition{background-color:#144212;display:inline-block;width:100%}.xnote-source-code.vs2015 .hljs-deletion{background-color:#600;display:inline-block;width:100%}.xnote-source-code.xcode .xnote-source-code-container{border:1px solid #eee}.xnote-source-code.xcode .xnote-source-code-line-number-bg{background-color:#fafafa}.xnote-source-code.xcode pre code.hljs{display:block;overflow-x:auto;padding:1em}.xnote-source-code.xcode code.hljs{padding:3px 5px}.xnote-source-code.xcode .hljs{background:#fff;color:#000}.xnote-source-code.xcode .xml .hljs-meta{color:silver}.xnote-source-code.xcode .hljs-comment,.xnote-source-code.xcode .hljs-quote{color:#007400}.xnote-source-code.xcode .hljs-attribute,.xnote-source-code.xcode .hljs-keyword,.xnote-source-code.xcode .hljs-literal,.xnote-source-code.xcode .hljs-name,.xnote-source-code.xcode .hljs-selector-tag,.xnote-source-code.xcode .hljs-tag{color:#aa0d91}.xnote-source-code.xcode .hljs-template-variable,.xnote-source-code.xcode .hljs-variable{color:#3f6e74}.xnote-source-code.xcode .hljs-code,.xnote-source-code.xcode .hljs-meta .hljs-string,.xnote-source-code.xcode .hljs-string{color:#c41a16}.xnote-source-code.xcode .hljs-link,.xnote-source-code.xcode .hljs-regexp{color:#0e0eff}.xnote-source-code.xcode .hljs-bullet,.xnote-source-code.xcode .hljs-number,.xnote-source-code.xcode .hljs-symbol,.xnote-source-code.xcode .hljs-title{color:#1c00cf}.xnote-source-code.xcode .hljs-meta,.xnote-source-code.xcode .hljs-section{color:#643820}.xnote-source-code.xcode .hljs-built_in,.xnote-source-code.xcode .hljs-class .hljs-title,.xnote-source-code.xcode .hljs-params,.xnote-source-code.xcode .hljs-title.class_,.xnote-source-code.xcode .hljs-type{color:#5c2699}.xnote-source-code.xcode .hljs-attr{color:#836c28}.xnote-source-code.xcode .hljs-subst{color:#000}.xnote-source-code.xcode .hljs-formula{background-color:#eee;font-style:italic}.xnote-source-code.xcode .hljs-addition{background-color:#baeeba}.xnote-source-code.xcode .hljs-deletion{background-color:#ffc8bd}.xnote-source-code.xcode .hljs-selector-class,.xnote-source-code.xcode .hljs-selector-id{color:#9b703f}.xnote-source-code.xcode .hljs-doctag,.xnote-source-code.xcode .hljs-strong{font-weight:700}.xnote-source-code.xcode .hljs-emphasis{font-style:italic}.xnote-source-code code{background:none;border:none;border-radius:0;padding:0;vertical-align:inherit}.xnote-source-code{position:relative}.xnote-source-code-container{border-radius:5px;display:flex;line-height:1.418em;overflow:hidden;position:relative}.xnote-source-code-container.xnote-source-code-auto-break{word-wrap:break-word;white-space:pre-wrap;word-break:break-all}code,kbd,pre,samp{font-family:Microsoft YaHei Mono,Menlo,Monaco,Consolas,Courier New,monospace}.xnote-source-code-line-number-bg{background-color:inherit;display:none;position:relative;width:3em;z-index:2}.xnote-source-code.xnote-source-code-line-number .xnote-source-code-line-number-bg{display:block}.xnote-source-code.xnote-source-code-line-number .xnote-source-code-line{margin-left:-4em}.xnote-source-code-content{counter-reset:codeNum;flex:1;max-height:450px;overflow:auto;padding:15px 0;position:relative}.xnote-source-code-content-highlight .xnote-source-code-line{opacity:.36}.xnote-source-code-line{display:flex;margin-left:0}.xnote-source-code-line-content{padding:0 20px}.xnote-source-code-line-number .xnote-source-code-line-content{padding:0 20px 0 10px}.xnote-source-code-line-number .xnote-source-code-line:before{box-sizing:border-box;content:counter(codeNum);counter-increment:codeNum;left:0;min-width:4em;opacity:.5;overflow:hidden;padding-right:10px;position:sticky;text-align:right;transform:translateX(-4em);white-space:nowrap;z-index:2}.xnote-source-code-content-highlight .xnote-source-code-line-emphasize{opacity:1}.xnote-source-code-lang{font-size:13px;opacity:.5;padding:4px 10px;pointer-events:none;position:absolute;right:0;top:0}";
662
- styleInject(css_248z$l);
663
-
664
- var css_248z$k = ".xnote-paragraph p{margin:8px 0}";
665
- styleInject(css_248z$k);
666
-
667
544
  function useReadonly() {
668
545
  const controller = core.inject(core$1.Controller);
669
546
  const is = core.createSignal(controller.readonly);
@@ -673,6 +550,66 @@ function useReadonly() {
673
550
  return is;
674
551
  }
675
552
 
553
+ const OutputInjectionToken = new core.InjectionToken('OutputInjectionToken');
554
+
555
+ function useOutput() {
556
+ return core.createSignal(core.inject(OutputInjectionToken));
557
+ }
558
+
559
+ const headingAttr = new core$1.Attribute('Heading', {
560
+ render(node, formatValue) {
561
+ node.classes.add('xnote-' + formatValue);
562
+ }
563
+ });
564
+ const headingAttrLoader = {
565
+ match(element) {
566
+ return /H[1-6]/.test(element.tagName) || /(^|\s)xnote-h[1-6](\s|$)/.test(element.className);
567
+ },
568
+ read(element) {
569
+ if (/H[1-6]/.test(element.tagName)) {
570
+ return {
571
+ attribute: headingAttr,
572
+ value: element.tagName.toLowerCase()
573
+ };
574
+ }
575
+ return {
576
+ attribute: headingAttr,
577
+ value: element.className.substring(6)
578
+ };
579
+ }
580
+ };
581
+ function registerHeadingShortcut(textbus) {
582
+ const keyboard = textbus.get(core$1.Keyboard);
583
+ const commander = textbus.get(core$1.Commander);
584
+ const selection = textbus.get(core$1.Selection);
585
+ keyboard.addShortcut({
586
+ keymap: {
587
+ key: '123456'.split(''),
588
+ ctrlKey: true
589
+ },
590
+ action(key) {
591
+ commander.applyAttribute(headingAttr, 'h' + key);
592
+ }
593
+ });
594
+ keyboard.addZenCodingInterceptor({
595
+ match(content) {
596
+ return /^#{1,6}$/.test(content);
597
+ },
598
+ try(key) {
599
+ return key === ' ';
600
+ },
601
+ action(content) {
602
+ if (selection.commonAncestorComponent instanceof SourceCodeComponent) {
603
+ return false;
604
+ }
605
+ const commonAncestorSlot = selection.commonAncestorSlot;
606
+ commonAncestorSlot.cut();
607
+ commander.applyAttribute(headingAttr, 'h' + content.length);
608
+ return true;
609
+ }
610
+ });
611
+ }
612
+
676
613
  class ParagraphComponent extends core$1.Component {
677
614
  static fromJSON(textbus, json) {
678
615
  const slot = textbus.get(core$1.Registry).createSlot(json.slot);
@@ -694,6 +631,7 @@ class ParagraphComponent extends core$1.Component {
694
631
  const selection = injector.get(core$1.Selection);
695
632
  core$1.onBreak(ev => {
696
633
  const afterSlot = ev.target.cut(ev.data.index);
634
+ afterSlot.removeAttribute(headingAttr);
697
635
  const nextParagraph = new ParagraphComponent(injector, {
698
636
  slot: afterSlot
699
637
  });
@@ -703,38 +641,30 @@ class ParagraphComponent extends core$1.Component {
703
641
  });
704
642
  }
705
643
  }
706
- Object.defineProperty(ParagraphComponent, "componentName", {
707
- enumerable: true,
708
- configurable: true,
709
- writable: true,
710
- value: 'ParagraphComponent'
711
- });
712
- Object.defineProperty(ParagraphComponent, "type", {
713
- enumerable: true,
714
- configurable: true,
715
- writable: true,
716
- value: core$1.ContentType.BlockComponent
717
- });
644
+ ParagraphComponent.componentName = 'ParagraphComponent';
645
+ ParagraphComponent.type = core$1.ContentType.BlockComponent;
718
646
  function ParagraphView(props) {
719
647
  const adapter = core.inject(platformBrowser.DomAdapter);
720
648
  const readonly = useReadonly();
649
+ const output = useOutput();
721
650
  return () => {
722
651
  const slot = props.component.state.slot;
723
652
  return (jsxRuntime.jsx("div", { class: "xnote-paragraph", ref: props.rootRef, "data-component": ParagraphComponent.name, children: adapter.slotRender(slot, children => {
724
653
  return (core$1.createVNode('p', null, children));
725
- }, readonly()) }));
654
+ }, readonly() || output()) }));
726
655
  };
727
656
  }
728
657
  const paragraphComponentLoader = {
729
658
  match(element) {
730
- return element.dataset.compoment === ParagraphComponent.name || element.tagName === 'P';
659
+ return element.dataset.compoment === ParagraphComponent.name || /P|H[1-6]/.test(element.tagName);
731
660
  },
732
661
  read(element, textbus, slotParser) {
662
+ const content = /P|H[1-6]/.test(element.tagName) ? element : element.children[0];
733
663
  const delta = slotParser(new core$1.Slot([
734
664
  core$1.ContentType.Text,
735
665
  core$1.ContentType.InlineComponent,
736
666
  core$1.ContentType.BlockComponent
737
- ]), element.tagName === 'P' ? element : element.children[0]).toDelta();
667
+ ]), content).toDelta();
738
668
  const results = deltaToBlock(delta, textbus);
739
669
  if (results.length === 1) {
740
670
  return results[0];
@@ -775,12 +705,6 @@ function deltaToBlock(delta, textbus) {
775
705
  return results;
776
706
  }
777
707
 
778
- const OutputInjectionToken = new core.InjectionToken('OutputInjectionToken');
779
-
780
- function useOutput() {
781
- return core.createSignal(core.inject(OutputInjectionToken));
782
- }
783
-
784
708
  const languageList = [{
785
709
  label: 'JavaScript',
786
710
  value: 'JavaScript',
@@ -876,42 +800,27 @@ function createCodeSlot() {
876
800
  class SourceCodeComponent extends core$1.Component {
877
801
  constructor() {
878
802
  super(...arguments);
879
- Object.defineProperty(this, "focus", {
880
- enumerable: true,
881
- configurable: true,
882
- writable: true,
883
- value: new core$1.BehaviorSubject(false)
884
- });
885
- Object.defineProperty(this, "cancelEmphasize", {
886
- enumerable: true,
887
- configurable: true,
888
- writable: true,
889
- value: () => {
890
- const selection = this.textbus.get(core$1.Selection);
891
- const slots = this.state.slots;
892
- const { startSlot, endSlot } = selection;
893
- let startIndex = slots.findIndex(i => i.slot === startSlot);
894
- const endIndex = slots.findIndex(i => i.slot === endSlot) + 1;
895
- for (; startIndex < endIndex; startIndex++) {
896
- slots[startIndex].emphasize = false;
897
- }
803
+ this.focus = new core$1.BehaviorSubject(false);
804
+ this.cancelEmphasize = () => {
805
+ const selection = this.textbus.get(core$1.Selection);
806
+ const slots = this.state.slots;
807
+ const { startSlot, endSlot } = selection;
808
+ let startIndex = slots.findIndex(i => i.slot === startSlot);
809
+ const endIndex = slots.findIndex(i => i.slot === endSlot) + 1;
810
+ for (; startIndex < endIndex; startIndex++) {
811
+ slots[startIndex].emphasize = false;
898
812
  }
899
- });
900
- Object.defineProperty(this, "emphasize", {
901
- enumerable: true,
902
- configurable: true,
903
- writable: true,
904
- value: () => {
905
- const selection = this.textbus.get(core$1.Selection);
906
- const slots = this.state.slots;
907
- const { startSlot, endSlot } = selection;
908
- let startIndex = slots.findIndex(i => i.slot === startSlot);
909
- const endIndex = slots.findIndex(i => i.slot === endSlot) + 1;
910
- for (; startIndex < endIndex; startIndex++) {
911
- slots[startIndex].emphasize = true;
912
- }
813
+ };
814
+ this.emphasize = () => {
815
+ const selection = this.textbus.get(core$1.Selection);
816
+ const slots = this.state.slots;
817
+ const { startSlot, endSlot } = selection;
818
+ let startIndex = slots.findIndex(i => i.slot === startSlot);
819
+ const endIndex = slots.findIndex(i => i.slot === endSlot) + 1;
820
+ for (; startIndex < endIndex; startIndex++) {
821
+ slots[startIndex].emphasize = true;
913
822
  }
914
- });
823
+ };
915
824
  }
916
825
  static fromJSON(textbus, json) {
917
826
  const registry = textbus.get(core$1.Registry);
@@ -1049,7 +958,7 @@ class SourceCodeComponent extends core$1.Component {
1049
958
  },
1050
959
  action() {
1051
960
  if (selection.isCollapsed) {
1052
- commander.insert(' ');
961
+ commander.insert(' ');
1053
962
  return;
1054
963
  }
1055
964
  const blocks = selection.getBlocks();
@@ -1082,68 +991,66 @@ class SourceCodeComponent extends core$1.Component {
1082
991
  }
1083
992
  });
1084
993
  }
994
+ removeSlot(slot) {
995
+ const slots = this.state.slots;
996
+ const index = slots.findIndex(i => i.slot === slot);
997
+ if (index > -1) {
998
+ slots.splice(index, 1);
999
+ return true;
1000
+ }
1001
+ return false;
1002
+ }
1085
1003
  }
1086
- Object.defineProperty(SourceCodeComponent, "type", {
1087
- enumerable: true,
1088
- configurable: true,
1089
- writable: true,
1090
- value: core$1.ContentType.BlockComponent
1091
- });
1092
- Object.defineProperty(SourceCodeComponent, "componentName", {
1093
- enumerable: true,
1094
- configurable: true,
1095
- writable: true,
1096
- value: 'SourceCodeComponent'
1097
- });
1098
- Object.defineProperty(SourceCodeComponent, "zenCoding", {
1099
- enumerable: true,
1100
- configurable: true,
1101
- writable: true,
1102
- value: {
1103
- key: 'Enter',
1104
- match(c) {
1004
+ SourceCodeComponent.type = core$1.ContentType.BlockComponent;
1005
+ SourceCodeComponent.componentName = 'SourceCodeComponent';
1006
+ SourceCodeComponent.zenCoding = {
1007
+ key: ['Enter', ' '],
1008
+ match(c, textbus) {
1009
+ const selection = textbus.get(core$1.Selection);
1010
+ if (selection.commonAncestorComponent instanceof ParagraphComponent) {
1105
1011
  const matchString = languageList.map(i => i.label || i.value).concat('js', 'ts').join('|').replace(/\+/, '\\+');
1106
1012
  const reg = new RegExp(`^\`\`\`(${matchString})$`, 'i');
1107
1013
  return reg.test(c);
1108
- },
1109
- createState(content) {
1110
- const matchString = content.replace(/`/g, '').replace(/\+/, '\\+');
1111
- for (const item of languageList) {
1112
- const reg = new RegExp(`^${matchString}$`, 'i');
1113
- if (reg.test(item.label || item.value)) {
1114
- return {
1115
- lang: item.value,
1116
- theme: '',
1117
- lineNumber: true,
1118
- slots: [createCodeSlot()]
1119
- };
1120
- }
1121
- }
1122
- if (/^js$/i.test(matchString)) {
1123
- return {
1124
- lang: 'JavaScript',
1125
- theme: '',
1126
- lineNumber: true,
1127
- slots: [createCodeSlot()]
1128
- };
1129
- }
1130
- if (/^ts$/i.test(matchString)) {
1014
+ }
1015
+ return false;
1016
+ },
1017
+ createState(content) {
1018
+ const matchString = content.replace(/`/g, '').replace(/\+/, '\\+');
1019
+ for (const item of languageList) {
1020
+ const reg = new RegExp(`^${matchString}$`, 'i');
1021
+ if (reg.test(item.label || item.value)) {
1131
1022
  return {
1132
- lang: 'TypeScript',
1023
+ lang: item.value,
1133
1024
  theme: '',
1134
1025
  lineNumber: true,
1135
1026
  slots: [createCodeSlot()]
1136
1027
  };
1137
1028
  }
1029
+ }
1030
+ if (/^js$/i.test(matchString)) {
1031
+ return {
1032
+ lang: 'JavaScript',
1033
+ theme: '',
1034
+ lineNumber: true,
1035
+ slots: [createCodeSlot()]
1036
+ };
1037
+ }
1038
+ if (/^ts$/i.test(matchString)) {
1138
1039
  return {
1139
- lang: '',
1040
+ lang: 'TypeScript',
1140
1041
  theme: '',
1141
1042
  lineNumber: true,
1142
1043
  slots: [createCodeSlot()]
1143
1044
  };
1144
1045
  }
1046
+ return {
1047
+ lang: '',
1048
+ theme: '',
1049
+ lineNumber: true,
1050
+ slots: [createCodeSlot()]
1051
+ };
1145
1052
  }
1146
- });
1053
+ };
1147
1054
  function SourceCodeView(props) {
1148
1055
  const adapter = core.inject(platformBrowser.DomAdapter);
1149
1056
  const isFocus = core.createSignal(false);
@@ -1231,11 +1138,11 @@ function SourceCodeView(props) {
1231
1138
  return textNode;
1232
1139
  });
1233
1140
  }
1234
- return (jsxRuntime.jsxs("pre", { ref: props.rootRef, class: {
1141
+ return (jsxRuntime.jsxs("div", { ref: props.rootRef, class: {
1235
1142
  'xnote-source-code': true,
1236
1143
  'xnote-source-code-line-number': state.lineNumber,
1237
1144
  [state.theme || 'github']: true
1238
- }, lang: state.lang, "data-auto-break": state.autoBreak, "data-theme": state.theme || null, "data-line-number": state.lineNumber, children: [!readonly() || !output() && jsxRuntime.jsxs(ComponentToolbar, { visible: isFocus(), children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(Dropdown, { onCheck: changeLang, trigger: 'hover', menu: languageList.map(item => {
1145
+ }, "data-lang": state.lang, "data-component": props.component.name, "data-auto-break": state.autoBreak + '', "data-theme": state.theme || null, "data-line-number": state.lineNumber + '', children: [(!readonly() && !output()) && jsxRuntime.jsxs(ComponentToolbar, { visible: isFocus(), children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(Dropdown, { onCheck: changeLang, trigger: 'hover', menu: languageList.map(item => {
1239
1146
  return {
1240
1147
  label: jsxRuntime.jsx(MenuItem, { checked: state.lang === item.value, children: item.label || 'Plain Text' }),
1241
1148
  value: item.value
@@ -1282,10 +1189,10 @@ function SourceCodeView(props) {
1282
1189
  children.push(br);
1283
1190
  }
1284
1191
  }
1285
- return core$1.createVNode('div', {
1192
+ return core$1.createVNode('pre', {
1286
1193
  class: 'xnote-source-code-line' + (item.emphasize ? ' xnote-source-code-line-emphasize' : '')
1287
1194
  }, [
1288
- core$1.createVNode('div', { class: 'xnote-source-code-line-content' }, children)
1195
+ core$1.createVNode('span', { class: 'xnote-source-code-line-content' }, children)
1289
1196
  ]);
1290
1197
  }, readonly());
1291
1198
  }) }), jsxRuntime.jsx("span", { class: "xnote-source-code-lang", children: lang })] })] }));
@@ -1293,12 +1200,13 @@ function SourceCodeView(props) {
1293
1200
  }
1294
1201
  const sourceCodeComponentLoader = {
1295
1202
  match(element) {
1296
- return element.tagName === 'PRE';
1203
+ return (element.tagName === 'DIV' && element.dataset.component === SourceCodeComponent.componentName) ||
1204
+ element.tagName === 'PRE';
1297
1205
  },
1298
1206
  read(el, textbus) {
1299
- const lines = el.querySelectorAll('.xnote-source-code-line');
1300
1207
  let slots = [];
1301
- if (lines.length) {
1208
+ if (el.tagName === 'DIV') {
1209
+ const lines = el.querySelectorAll('.xnote-source-code-line');
1302
1210
  slots = Array.from(lines).map(i => {
1303
1211
  const code = i.innerText.replace(/[\s\n]+$/, '');
1304
1212
  const item = createCodeSlot();
@@ -1319,9 +1227,10 @@ const sourceCodeComponentLoader = {
1319
1227
  });
1320
1228
  }
1321
1229
  return new SourceCodeComponent(textbus, {
1322
- lang: el.getAttribute('lang') || '',
1323
- theme: el.getAttribute('theme') || '',
1324
- lineNumber: !el.classList.contains('xnote-source-code-hide-line-number'),
1230
+ lang: el.dataset.lang || '',
1231
+ theme: el.dataset.theme || '',
1232
+ lineNumber: el.dataset.lineNumber === 'true',
1233
+ autoBreak: el.dataset.autoBreak === 'true',
1325
1234
  slots
1326
1235
  });
1327
1236
  },
@@ -1420,15 +1329,26 @@ function AttrTool(props) {
1420
1329
  textIndent: 0
1421
1330
  });
1422
1331
  function updateCheckStates() {
1423
- var _a, _b;
1424
- (_a = props.queryBefore) === null || _a === void 0 ? void 0 : _a.call(props);
1332
+ if (!props.slot && !selection.isSelected) {
1333
+ return;
1334
+ }
1425
1335
  setCheckStates(draft => {
1426
- const textAlignState = query.queryAttribute(textAlignAttr);
1427
- const textIndentState = query.queryAttribute(textIndentAttr);
1336
+ const range = props.slot ? {
1337
+ startSlot: props.slot,
1338
+ endSlot: props.slot,
1339
+ startOffset: 0,
1340
+ endOffset: props.slot.length
1341
+ } : {
1342
+ startSlot: selection.startSlot,
1343
+ startOffset: selection.startOffset,
1344
+ endSlot: selection.endSlot,
1345
+ endOffset: selection.endOffset
1346
+ };
1347
+ const textAlignState = query.queryAttributeByRange(textAlignAttr, range);
1348
+ const textIndentState = query.queryAttributeByRange(textIndentAttr, range);
1428
1349
  draft.textAlign = textAlignState.state === core$1.QueryStateType.Enabled ? textAlignState.value : 'left';
1429
1350
  draft.textIndent = textIndentState.state === core$1.QueryStateType.Enabled ? textIndentState.value : 0;
1430
1351
  });
1431
- (_b = props.queryAfter) === null || _b === void 0 ? void 0 : _b.call(props);
1432
1352
  }
1433
1353
  updateCheckStates();
1434
1354
  const subscription = refreshService.onRefresh.subscribe(() => {
@@ -1504,51 +1424,6 @@ function AttrTool(props) {
1504
1424
  });
1505
1425
  }
1506
1426
 
1507
- const headingAttr = new core$1.Attribute('Heading', {
1508
- render(node, formatValue) {
1509
- node.classes.add('xnote-' + formatValue);
1510
- }
1511
- });
1512
- const headingAttrLoader = {
1513
- match(element) {
1514
- return /H[1-6]/.test(element.tagName);
1515
- },
1516
- read(element) {
1517
- return {
1518
- attribute: headingAttr,
1519
- value: element.tagName.toLowerCase()
1520
- };
1521
- }
1522
- };
1523
- function registerHeadingShortcut(textbus) {
1524
- const keyboard = textbus.get(core$1.Keyboard);
1525
- const commander = textbus.get(core$1.Commander);
1526
- const selection = textbus.get(core$1.Selection);
1527
- keyboard.addShortcut({
1528
- keymap: {
1529
- key: '123456'.split(''),
1530
- ctrlKey: true
1531
- },
1532
- action(key) {
1533
- commander.applyAttribute(headingAttr, 'h' + key);
1534
- }
1535
- });
1536
- keyboard.addZenCodingInterceptor({
1537
- match(content) {
1538
- return /^#{1,6}$/.test(content);
1539
- },
1540
- try(key) {
1541
- return key === ' ';
1542
- },
1543
- action(content) {
1544
- const commonAncestorSlot = selection.commonAncestorSlot;
1545
- commonAncestorSlot.cut();
1546
- commander.applyAttribute(headingAttr, 'h' + content.length);
1547
- return true;
1548
- }
1549
- });
1550
- }
1551
-
1552
1427
  function useBlockContent(slot) {
1553
1428
  const textbus = core$1.useContext();
1554
1429
  const selection = textbus.get(core$1.Selection);
@@ -1604,8 +1479,6 @@ class TableComponent extends core$1.Component {
1604
1479
  rowspan: 1,
1605
1480
  colspan: 1,
1606
1481
  slot: new core$1.Slot([
1607
- core$1.ContentType.Text,
1608
- core$1.ContentType.InlineComponent,
1609
1482
  core$1.ContentType.BlockComponent
1610
1483
  ])
1611
1484
  };
@@ -1614,26 +1487,12 @@ class TableComponent extends core$1.Component {
1614
1487
  })
1615
1488
  }) {
1616
1489
  super(textbus, state);
1617
- Object.defineProperty(this, "selection", {
1618
- enumerable: true,
1619
- configurable: true,
1620
- writable: true,
1621
- value: this.textbus.get(core$1.Selection)
1622
- });
1623
- Object.defineProperty(this, "focus", {
1624
- enumerable: true,
1625
- configurable: true,
1626
- writable: true,
1627
- value: new core$1.Subject()
1628
- });
1629
- Object.defineProperty(this, "tableSelection", {
1630
- enumerable: true,
1631
- configurable: true,
1632
- writable: true,
1633
- value: core.createSignal(null)
1634
- });
1490
+ this.selection = this.textbus.get(core$1.Selection);
1491
+ this.focus = new core$1.Subject();
1492
+ this.tableSelection = core.createSignal(null);
1635
1493
  }
1636
1494
  setup() {
1495
+ const selection = core$1.useContext(core$1.Selection);
1637
1496
  core$1.onFocusIn(() => {
1638
1497
  this.focus.next(true);
1639
1498
  });
@@ -1643,12 +1502,42 @@ class TableComponent extends core$1.Component {
1643
1502
  useBlockContent((slot) => {
1644
1503
  return slot.parent === this;
1645
1504
  });
1646
- core$1.onGetRanges(ev => {
1647
- const selectPosition = this.tableSelection();
1505
+ const sub = selection.onChange.subscribe(() => {
1506
+ if (selection.commonAncestorComponent !== this || selection.isCollapsed) {
1507
+ this.tableSelection.set(null);
1508
+ }
1509
+ });
1510
+ core$1.onDestroy(() => {
1511
+ sub.unsubscribe();
1512
+ });
1513
+ const findPosition = (slot) => {
1514
+ let cell = slot;
1515
+ while ((cell === null || cell === void 0 ? void 0 : cell.parent) && cell.parent !== this) {
1516
+ cell = cell.parentSlot;
1517
+ }
1518
+ if (cell) {
1519
+ const rows = this.state.rows;
1520
+ for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
1521
+ const row = rows[rowIndex].cells;
1522
+ for (let colIndex = 0; colIndex < row.length; colIndex++) {
1523
+ const item = row[colIndex].slot;
1524
+ if (item === cell) {
1525
+ return {
1526
+ rowIndex,
1527
+ colIndex
1528
+ };
1529
+ }
1530
+ }
1531
+ }
1532
+ }
1533
+ return null;
1534
+ };
1535
+ const select = (ev, selectPosition) => {
1536
+ this.tableSelection.set(selectPosition);
1648
1537
  if (selectPosition) {
1649
1538
  const cells = [];
1650
- this.state.rows.slice(selectPosition.startRow, selectPosition.endRow + 1).forEach(row => {
1651
- cells.push(...row.cells.slice(selectPosition.startColumn, selectPosition.endColumn + 1).map(i => i.slot));
1539
+ this.state.rows.slice(selectPosition.startRow, selectPosition.endRow).forEach(row => {
1540
+ cells.push(...row.cells.slice(selectPosition.startColumn, selectPosition.endColumn).map(i => i.slot));
1652
1541
  });
1653
1542
  ev.useRanges(cells.map(i => {
1654
1543
  return {
@@ -1659,6 +1548,37 @@ class TableComponent extends core$1.Component {
1659
1548
  }));
1660
1549
  ev.preventDefault();
1661
1550
  }
1551
+ };
1552
+ core$1.onGetRanges(ev => {
1553
+ var _a;
1554
+ const startPosition = findPosition(selection.startSlot);
1555
+ const endPosition = findPosition(selection.endSlot);
1556
+ if (startPosition && endPosition) {
1557
+ if (startPosition.rowIndex === endPosition.rowIndex && startPosition.colIndex === endPosition.colIndex) {
1558
+ if (selection.startSlot === selection.endSlot && selection.startOffset === 0 && selection.endOffset === ((_a = selection.startSlot) === null || _a === void 0 ? void 0 : _a.length)) {
1559
+ select(ev, {
1560
+ startColumn: startPosition.colIndex,
1561
+ startRow: startPosition.rowIndex,
1562
+ endColumn: endPosition.colIndex + 1,
1563
+ endRow: endPosition.rowIndex + 1
1564
+ });
1565
+ return;
1566
+ }
1567
+ select(ev, null);
1568
+ return;
1569
+ }
1570
+ const [startColumn, endColumn] = [startPosition.colIndex, endPosition.colIndex].sort((a, b) => a - b);
1571
+ const [startRow, endRow] = [startPosition.rowIndex, endPosition.rowIndex].sort((a, b) => a - b);
1572
+ select(ev, {
1573
+ startColumn,
1574
+ startRow,
1575
+ endColumn: endColumn + 1,
1576
+ endRow: endRow + 1
1577
+ });
1578
+ }
1579
+ else {
1580
+ select(ev, null);
1581
+ }
1662
1582
  });
1663
1583
  }
1664
1584
  afterContentCheck() {
@@ -1702,8 +1622,6 @@ class TableComponent extends core$1.Component {
1702
1622
  this.state.rows.forEach(row => {
1703
1623
  const slot = new core$1.Slot([
1704
1624
  core$1.ContentType.BlockComponent,
1705
- core$1.ContentType.InlineComponent,
1706
- core$1.ContentType.Text
1707
1625
  ]);
1708
1626
  slot.insert(new ParagraphComponent(this.textbus, {
1709
1627
  slot: new core$1.Slot([
@@ -1731,8 +1649,6 @@ class TableComponent extends core$1.Component {
1731
1649
  cells: this.state.layoutWidth.map(() => {
1732
1650
  const slot = new core$1.Slot([
1733
1651
  core$1.ContentType.BlockComponent,
1734
- core$1.ContentType.InlineComponent,
1735
- core$1.ContentType.Text
1736
1652
  ]);
1737
1653
  slot.insert(new ParagraphComponent(this.textbus, {
1738
1654
  slot: new core$1.Slot([
@@ -1756,21 +1672,8 @@ class TableComponent extends core$1.Component {
1756
1672
  });
1757
1673
  }
1758
1674
  }
1759
- Object.defineProperty(TableComponent, "componentName", {
1760
- enumerable: true,
1761
- configurable: true,
1762
- writable: true,
1763
- value: 'TableComponent'
1764
- });
1765
- Object.defineProperty(TableComponent, "type", {
1766
- enumerable: true,
1767
- configurable: true,
1768
- writable: true,
1769
- value: core$1.ContentType.BlockComponent
1770
- });
1771
-
1772
- var css_248z$j = ".xnote-todolist{align-items:center;display:flex;margin:8px 0}.xnote-todolist-icon{color:#296eff;cursor:pointer;margin-right:6px}.xnote-todolist-content[style*=text-indent]{text-indent:0!important}.xnote-todolist-content[style*=text-align]{text-align:left!important}";
1773
- styleInject(css_248z$j);
1675
+ TableComponent.componentName = 'TableComponent';
1676
+ TableComponent.type = core$1.ContentType.BlockComponent;
1774
1677
 
1775
1678
  const strikeThroughFormatter = new core$1.Formatter('strike', {
1776
1679
  columned: true,
@@ -1807,7 +1710,7 @@ function registerStrikeThroughShortcut(textbus) {
1807
1710
  }
1808
1711
  const strikeThroughFormatLoader = {
1809
1712
  match(element) {
1810
- return /strike|del|s/i.test(element.tagName) || /line-through/.test(element.style.textDecoration);
1713
+ return /^(strike|del|s)$/i.test(element.tagName) || /line-through/.test(element.style.textDecoration);
1811
1714
  },
1812
1715
  read() {
1813
1716
  return {
@@ -1831,6 +1734,7 @@ class TodolistComponent extends core$1.Component {
1831
1734
  const selection = core$1.useContext(core$1.Selection);
1832
1735
  core$1.onBreak(ev => {
1833
1736
  const slot = ev.target.cut(ev.data.index);
1737
+ slot.removeAttribute(headingAttr);
1834
1738
  if (ev.target.isEmpty && slot.isEmpty) {
1835
1739
  const beforeIndex = this.parent.indexOf(this);
1836
1740
  const beforeComponent = this.parent.getContentAtIndex(beforeIndex - 1);
@@ -1875,37 +1779,28 @@ class TodolistComponent extends core$1.Component {
1875
1779
  });
1876
1780
  }
1877
1781
  }
1878
- Object.defineProperty(TodolistComponent, "type", {
1879
- enumerable: true,
1880
- configurable: true,
1881
- writable: true,
1882
- value: core$1.ContentType.BlockComponent
1883
- });
1884
- Object.defineProperty(TodolistComponent, "componentName", {
1885
- enumerable: true,
1886
- configurable: true,
1887
- writable: true,
1888
- value: 'TodoListComponent'
1889
- });
1890
- Object.defineProperty(TodolistComponent, "zenCoding", {
1891
- enumerable: true,
1892
- configurable: true,
1893
- writable: true,
1894
- value: {
1895
- match: /^\[(x|\s)?\]$/,
1896
- key: ' ',
1897
- createState(content) {
1898
- const isChecked = content.charAt(1) === 'x';
1899
- return {
1900
- checked: isChecked,
1901
- slot: new core$1.Slot([
1902
- core$1.ContentType.InlineComponent,
1903
- core$1.ContentType.Text
1904
- ])
1905
- };
1782
+ TodolistComponent.type = core$1.ContentType.BlockComponent;
1783
+ TodolistComponent.componentName = 'TodoListComponent';
1784
+ TodolistComponent.zenCoding = {
1785
+ match(content, textbus) {
1786
+ const selection = textbus.get(core$1.Selection);
1787
+ if (selection.commonAncestorComponent instanceof ParagraphComponent) {
1788
+ return /^\[(x|\s)?\]$/.test(content);
1906
1789
  }
1790
+ return false;
1791
+ },
1792
+ key: ' ',
1793
+ createState(content) {
1794
+ const isChecked = content.charAt(1) === 'x';
1795
+ return {
1796
+ checked: isChecked,
1797
+ slot: new core$1.Slot([
1798
+ core$1.ContentType.InlineComponent,
1799
+ core$1.ContentType.Text
1800
+ ])
1801
+ };
1907
1802
  }
1908
- });
1803
+ };
1909
1804
  function TodolistView(props) {
1910
1805
  const adapter = core.inject(platformBrowser.DomAdapter);
1911
1806
  const component = props.component;
@@ -1940,7 +1835,7 @@ function TodolistView(props) {
1940
1835
  return core$1.createVNode('div', {
1941
1836
  class: 'xnote-todolist-content'
1942
1837
  }, children);
1943
- }, readonly())] }));
1838
+ }, readonly() || output())] }));
1944
1839
  };
1945
1840
  }
1946
1841
  const todolistComponentLoader = {
@@ -1959,9 +1854,6 @@ const todolistComponentLoader = {
1959
1854
  }
1960
1855
  };
1961
1856
 
1962
- var css_248z$i = ".xnote-blockquote{border-left:2px solid #296eff;margin:1em 0;padding:0 15px}.xnote-blockquote>:first-child{margin-top:0}.xnote-blockquote>:last-child{margin-bottom:0}";
1963
- styleInject(css_248z$i);
1964
-
1965
1857
  class BlockquoteComponent extends core$1.Component {
1966
1858
  static fromJSON(textbus, json) {
1967
1859
  const slot = textbus.get(core$1.Registry).createSlot(json.slot);
@@ -1971,8 +1863,6 @@ class BlockquoteComponent extends core$1.Component {
1971
1863
  }
1972
1864
  constructor(textbus, state = {
1973
1865
  slot: new core$1.Slot([
1974
- core$1.ContentType.Text,
1975
- core$1.ContentType.InlineComponent,
1976
1866
  core$1.ContentType.BlockComponent
1977
1867
  ])
1978
1868
  }) {
@@ -1982,44 +1872,34 @@ class BlockquoteComponent extends core$1.Component {
1982
1872
  useBlockContent(this.state.slot);
1983
1873
  }
1984
1874
  }
1985
- Object.defineProperty(BlockquoteComponent, "type", {
1986
- enumerable: true,
1987
- configurable: true,
1988
- writable: true,
1989
- value: core$1.ContentType.BlockComponent
1990
- });
1991
- Object.defineProperty(BlockquoteComponent, "componentName", {
1992
- enumerable: true,
1993
- configurable: true,
1994
- writable: true,
1995
- value: 'BlockquoteComponent'
1996
- });
1997
- Object.defineProperty(BlockquoteComponent, "zenCoding", {
1998
- enumerable: true,
1999
- configurable: true,
2000
- writable: true,
2001
- value: {
2002
- key: ' ',
2003
- match: /^>$/,
2004
- createState() {
2005
- return {
2006
- slot: new core$1.Slot([
2007
- core$1.ContentType.Text,
2008
- core$1.ContentType.InlineComponent,
2009
- core$1.ContentType.BlockComponent
2010
- ])
2011
- };
1875
+ BlockquoteComponent.type = core$1.ContentType.BlockComponent;
1876
+ BlockquoteComponent.componentName = 'BlockquoteComponent';
1877
+ BlockquoteComponent.zenCoding = {
1878
+ key: ' ',
1879
+ match(content, textbus) {
1880
+ const selection = textbus.get(core$1.Selection);
1881
+ if (selection.commonAncestorComponent instanceof ParagraphComponent) {
1882
+ return /^>$/.test(content);
2012
1883
  }
1884
+ return false;
1885
+ },
1886
+ createState() {
1887
+ return {
1888
+ slot: new core$1.Slot([
1889
+ core$1.ContentType.BlockComponent
1890
+ ])
1891
+ };
2013
1892
  }
2014
- });
1893
+ };
2015
1894
  function BlockquoteView(props) {
2016
1895
  const adapter = core.inject(platformBrowser.DomAdapter);
2017
1896
  const readonly = useReadonly();
1897
+ const output = useOutput();
2018
1898
  return () => {
2019
1899
  const slot = props.component.state.slot;
2020
1900
  return (jsxRuntime.jsx("blockquote", { class: "xnote-blockquote", ref: props.rootRef, "data-component": props.component.name, children: adapter.slotRender(slot, children => {
2021
1901
  return core$1.createVNode('div', null, children);
2022
- }, readonly()) }));
1902
+ }, readonly() || output()) }));
2023
1903
  };
2024
1904
  }
2025
1905
  const blockquoteComponentLoader = {
@@ -2028,14 +1908,12 @@ const blockquoteComponentLoader = {
2028
1908
  },
2029
1909
  read(element, textbus, slotParser) {
2030
1910
  const delta = slotParser(new core$1.Slot([
2031
- core$1.ContentType.Text,
2032
1911
  core$1.ContentType.BlockComponent,
2033
- core$1.ContentType.InlineComponent
1912
+ core$1.ContentType.InlineComponent,
1913
+ core$1.ContentType.Text
2034
1914
  ]), element).toDelta();
2035
1915
  const slot = new core$1.Slot([
2036
1916
  core$1.ContentType.BlockComponent,
2037
- core$1.ContentType.InlineComponent,
2038
- core$1.ContentType.Text
2039
1917
  ]);
2040
1918
  deltaToBlock(delta, textbus).forEach(i => {
2041
1919
  slot.insert(i);
@@ -2046,9 +1924,6 @@ const blockquoteComponentLoader = {
2046
1924
  },
2047
1925
  };
2048
1926
 
2049
- var css_248z$h = ".xnote-list{margin:8px 0;padding:0}.xnote-list>li{display:flex}.xnote-list-type{box-sizing:border-box;color:#296eff;text-align:left;text-indent:0;white-space:nowrap;width:24px}.xnote-order-btn{padding-left:5px}.xnote-list-content[style*=text-indent]{text-indent:0!important}.xnote-list-content[style*=text-align]{text-align:left!important}";
2050
- styleInject(css_248z$h);
2051
-
2052
1927
  class ListComponent extends core$1.Component {
2053
1928
  static fromJSON(textbus, json) {
2054
1929
  return new ListComponent(textbus, {
@@ -2084,6 +1959,7 @@ class ListComponent extends core$1.Component {
2084
1959
  });
2085
1960
  core$1.onBreak(ev => {
2086
1961
  const slot = ev.target.cut(ev.data.index);
1962
+ slot.removeAttribute(headingAttr);
2087
1963
  if (ev.target.isEmpty && slot.isEmpty) {
2088
1964
  const beforeIndex = this.parent.indexOf(this);
2089
1965
  const beforeComponent = this.parent.getContentAtIndex(beforeIndex - 1);
@@ -2129,39 +2005,49 @@ class ListComponent extends core$1.Component {
2129
2005
  selection.setPosition(slot, 0);
2130
2006
  }
2131
2007
  });
2008
+ core$1.useDynamicShortcut({
2009
+ keymap: {
2010
+ key: 'Tab'
2011
+ },
2012
+ action: () => {
2013
+ updateAfterList(this);
2014
+ return false;
2015
+ }
2016
+ });
2017
+ core$1.useDynamicShortcut({
2018
+ keymap: {
2019
+ key: 'Tab',
2020
+ shiftKey: true
2021
+ },
2022
+ action: () => {
2023
+ Promise.resolve().then(() => updateAfterList(this));
2024
+ return false;
2025
+ }
2026
+ });
2132
2027
  }
2133
2028
  }
2134
- Object.defineProperty(ListComponent, "componentName", {
2135
- enumerable: true,
2136
- configurable: true,
2137
- writable: true,
2138
- value: 'ListComponent'
2139
- });
2140
- Object.defineProperty(ListComponent, "type", {
2141
- enumerable: true,
2142
- configurable: true,
2143
- writable: true,
2144
- value: core$1.ContentType.BlockComponent
2145
- });
2146
- Object.defineProperty(ListComponent, "zenCoding", {
2147
- enumerable: true,
2148
- configurable: true,
2149
- writable: true,
2150
- value: {
2151
- key: ' ',
2152
- match: /^([1-9]\.|[+*])$/,
2153
- createState(content) {
2154
- return {
2155
- type: /[-+*]/.test(content) ? 'UnorderedList' : 'OrderedList',
2156
- reorder: true,
2157
- slot: new core$1.Slot([
2158
- core$1.ContentType.InlineComponent,
2159
- core$1.ContentType.Text
2160
- ])
2161
- };
2029
+ ListComponent.componentName = 'ListComponent';
2030
+ ListComponent.type = core$1.ContentType.BlockComponent;
2031
+ ListComponent.zenCoding = {
2032
+ key: ' ',
2033
+ match(content, textbus) {
2034
+ const selection = textbus.get(core$1.Selection);
2035
+ if (selection.commonAncestorComponent instanceof ParagraphComponent) {
2036
+ return /^([1-9]\.|[+*])$/.test(content);
2162
2037
  }
2038
+ return false;
2039
+ },
2040
+ createState(content) {
2041
+ return {
2042
+ type: /[-+*]/.test(content) ? 'UnorderedList' : 'OrderedList',
2043
+ reorder: true,
2044
+ slot: new core$1.Slot([
2045
+ core$1.ContentType.InlineComponent,
2046
+ core$1.ContentType.Text
2047
+ ])
2048
+ };
2163
2049
  }
2164
- });
2050
+ };
2165
2051
  const step = 26;
2166
2052
  const chars = Array.from({ length: step }).map((_, index) => String.fromCharCode(96 + index + 1));
2167
2053
  function numberToLetter(num) {
@@ -2251,14 +2137,14 @@ function ListComponentView(props) {
2251
2137
  }, children: jsxRuntime.jsxs("li", { style: {
2252
2138
  justifyContent: align[component.state.slot.getAttribute(textAlignAttr)],
2253
2139
  textAlign: component.state.slot.getAttribute(textAlignAttr) === 'justify' ? 'justify' : void 0
2254
- }, children: [jsxRuntime.jsx("div", { class: "xnote-list-type", children: component.state.type === 'UnorderedList' || readonly() || output() ?
2140
+ }, children: [jsxRuntime.jsx("div", { class: "xnote-list-type", children: (component.state.type === 'UnorderedList' || readonly() || output()) ?
2255
2141
  jsxRuntime.jsx("span", { class: "xnote-order-btn", children: icon })
2256
2142
  :
2257
2143
  jsxRuntime.jsx(Dropdown, { menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem, { onClick: () => reorder(false), children: "\u7EE7\u7EED\u7F16\u53F7" }), jsxRuntime.jsx(MenuItem, { onClick: () => reorder(true), children: "\u91CD\u65B0\u7F16\u53F7" })] }), children: jsxRuntime.jsx(Button, { style: { color: 'inherit' }, children: icon }) }) }), adapter.slotRender(component.state.slot, children => {
2258
2144
  return core$1.createVNode('div', {
2259
2145
  class: 'xnote-list-content'
2260
2146
  }, children);
2261
- }, readonly())] }) }));
2147
+ }, readonly() || output())] }) }));
2262
2148
  };
2263
2149
  }
2264
2150
  const listComponentLoader = {
@@ -2317,45 +2203,59 @@ function useActiveBlock() {
2317
2203
  sourceCode: false,
2318
2204
  highlightBox: false
2319
2205
  });
2320
- function updateCheckStates() {
2206
+ function updateCheckStates(range) {
2321
2207
  setCheckStates(draft => {
2322
- const heading = query.queryAttribute(headingAttr);
2323
- draft.paragraph = query.queryComponent(ParagraphComponent).state === core$1.QueryStateType.Enabled;
2208
+ const heading = query.queryAttributeByRange(headingAttr, range);
2209
+ draft.paragraph = query.queryComponentByRange(ParagraphComponent, range).state === core$1.QueryStateType.Enabled;
2324
2210
  draft.h1 = draft.h2 = draft.h3 = draft.h4 = draft.h5 = draft.h6 = false;
2325
2211
  if (heading.state === core$1.QueryStateType.Enabled) {
2326
2212
  draft[heading.value] = true;
2327
2213
  draft.paragraph = false;
2328
2214
  }
2329
- const queryList = query.queryComponent(ListComponent);
2215
+ const queryList = query.queryComponentByRange(ListComponent, range);
2330
2216
  draft.unorderedList = queryList.state === core$1.QueryStateType.Enabled && queryList.value.state.type === 'UnorderedList';
2331
2217
  draft.orderedList = queryList.state === core$1.QueryStateType.Enabled && queryList.value.state.type === 'OrderedList';
2332
- draft.table = query.queryComponent(TableComponent).state === core$1.QueryStateType.Enabled;
2333
- draft.todolist = query.queryComponent(TodolistComponent).state === core$1.QueryStateType.Enabled;
2334
- draft.blockquote = query.queryComponent(BlockquoteComponent).state === core$1.QueryStateType.Enabled;
2335
- draft.sourceCode = query.queryComponent(SourceCodeComponent).state === core$1.QueryStateType.Enabled;
2218
+ draft.table = query.queryComponentByRange(TableComponent, range).state === core$1.QueryStateType.Enabled;
2219
+ draft.todolist = query.queryComponentByRange(TodolistComponent, range).state === core$1.QueryStateType.Enabled;
2220
+ draft.blockquote = query.queryComponentByRange(BlockquoteComponent, range).state === core$1.QueryStateType.Enabled;
2221
+ draft.sourceCode = query.queryComponentByRange(SourceCodeComponent, range).state === core$1.QueryStateType.Enabled;
2336
2222
  });
2337
2223
  }
2338
- updateCheckStates();
2339
2224
  const subscription = refreshService.onRefresh.subscribe(() => {
2340
- updateCheckStates();
2225
+ if (!selection.isSelected) {
2226
+ return;
2227
+ }
2228
+ updateCheckStates({
2229
+ startOffset: selection.startOffset,
2230
+ startSlot: selection.startSlot,
2231
+ endSlot: selection.endSlot,
2232
+ endOffset: selection.endOffset
2233
+ });
2341
2234
  });
2342
2235
  core.onUnmounted(() => {
2343
2236
  subscription.unsubscribe();
2344
2237
  });
2345
2238
  return function (slot = null) {
2346
2239
  if (slot) {
2347
- const snapshot = selection.createSnapshot();
2348
- selection.setBaseAndExtent(slot, 0, slot, slot.length);
2349
- updateCheckStates();
2350
- snapshot.restore();
2240
+ updateCheckStates({
2241
+ startOffset: 0,
2242
+ endOffset: slot.length,
2243
+ startSlot: slot,
2244
+ endSlot: slot
2245
+ });
2246
+ }
2247
+ else if (selection.isSelected) {
2248
+ updateCheckStates({
2249
+ startOffset: selection.startOffset,
2250
+ startSlot: selection.startSlot,
2251
+ endSlot: selection.endSlot,
2252
+ endOffset: selection.endOffset
2253
+ });
2351
2254
  }
2352
2255
  return checkStates();
2353
2256
  };
2354
2257
  }
2355
2258
 
2356
- var css_248z$g = ".xnote-highlight-box{background:#fcf5ce;border:1px solid #f5c774;border-radius:4px;display:flex;margin:16px 0}.xnote-highlight-box-left{padding-top:.65em;text-align:center;width:40px}.xnote-highlight-box-content{flex:1}.xnote-highlight-box-icon button{background:none;border:none;border-radius:4px;cursor:pointer;font-size:1.4em;height:30px;padding:0;width:30px}.xnote-highlight-box-icon button:hover{background:rgba(0,0,0,.1)}.xnote-highlight-box-icons{text-align:left}.xnote-highlight-box-icons button{background:none;border:none;border-radius:4px;cursor:pointer;font-size:24px;height:30px;padding:0;width:30px}.xnote-highlight-box-icons button:hover{background:rgba(0,0,0,.1)}.xnote-highlight-box-content{padding:5px}";
2357
- styleInject(css_248z$g);
2358
-
2359
2259
  class HighlightBoxComponent extends core$1.Component {
2360
2260
  static fromJSON(textbus, json) {
2361
2261
  return new HighlightBoxComponent(textbus, {
@@ -2367,8 +2267,6 @@ class HighlightBoxComponent extends core$1.Component {
2367
2267
  type: '',
2368
2268
  slot: new core$1.Slot([
2369
2269
  core$1.ContentType.BlockComponent,
2370
- core$1.ContentType.InlineComponent,
2371
- core$1.ContentType.Text
2372
2270
  ])
2373
2271
  }) {
2374
2272
  super(textbus, state);
@@ -2377,24 +2275,9 @@ class HighlightBoxComponent extends core$1.Component {
2377
2275
  useBlockContent(this.state.slot);
2378
2276
  }
2379
2277
  }
2380
- Object.defineProperty(HighlightBoxComponent, "defaultTypes", {
2381
- enumerable: true,
2382
- configurable: true,
2383
- writable: true,
2384
- value: ['❤️', '💡', '📌', '✅', '❎', '👍', '🎉', '🚫', '❗']
2385
- });
2386
- Object.defineProperty(HighlightBoxComponent, "componentName", {
2387
- enumerable: true,
2388
- configurable: true,
2389
- writable: true,
2390
- value: 'HighlightBoxComponent'
2391
- });
2392
- Object.defineProperty(HighlightBoxComponent, "type", {
2393
- enumerable: true,
2394
- configurable: true,
2395
- writable: true,
2396
- value: core$1.ContentType.BlockComponent
2397
- });
2278
+ HighlightBoxComponent.defaultTypes = ['❤️', '💡', '📌', '✅', '❎', '👍', '🎉', '🚫', '❗'];
2279
+ HighlightBoxComponent.componentName = 'HighlightBoxComponent';
2280
+ HighlightBoxComponent.type = core$1.ContentType.BlockComponent;
2398
2281
  function HighlightBoxView(props) {
2399
2282
  const adapter = core.inject(platformBrowser.DomAdapter);
2400
2283
  const readonly = useReadonly();
@@ -2416,7 +2299,7 @@ function HighlightBoxView(props) {
2416
2299
  return core$1.createVNode('div', {
2417
2300
  class: 'xnote-highlight-box-content'
2418
2301
  }, children);
2419
- }, readonly())] }));
2302
+ }, readonly() || output())] }));
2420
2303
  }
2421
2304
  return (jsxRuntime.jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-left", children: jsxRuntime.jsx(Dropdown, { trigger: "click", ref: dropdownRef, width: "260px", menu: jsxRuntime.jsxs("div", { class: "xnote-highlight-box-icons", children: [HighlightBoxComponent.defaultTypes.map(icon => {
2422
2305
  return (jsxRuntime.jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
@@ -2427,7 +2310,7 @@ function HighlightBoxView(props) {
2427
2310
  return core$1.createVNode('div', {
2428
2311
  class: 'xnote-highlight-box-content'
2429
2312
  }, children);
2430
- }, readonly())] }));
2313
+ }, readonly() || output())] }));
2431
2314
  };
2432
2315
  }
2433
2316
  const highlightBoxComponentLoader = {
@@ -2442,8 +2325,6 @@ const highlightBoxComponentLoader = {
2442
2325
  ]), element.querySelector('.xnote-highlight-box-content')).toDelta();
2443
2326
  const slot = new core$1.Slot([
2444
2327
  core$1.ContentType.BlockComponent,
2445
- core$1.ContentType.InlineComponent,
2446
- core$1.ContentType.Text
2447
2328
  ]);
2448
2329
  deltaToBlock(delta, textbus).forEach(i => {
2449
2330
  slot.insert(i);
@@ -2475,17 +2356,16 @@ function useBlockTransform() {
2475
2356
  commander.unApplyAttribute(headingAttr);
2476
2357
  commander.transform({
2477
2358
  targetType: ParagraphComponent.type,
2478
- multipleSlot: false,
2479
2359
  slotFactory() {
2480
2360
  return new core$1.Slot([
2481
2361
  core$1.ContentType.InlineComponent,
2482
2362
  core$1.ContentType.Text
2483
2363
  ]);
2484
2364
  },
2485
- stateFactory(slot) {
2486
- return new ParagraphComponent(textbus, {
2365
+ stateFactory(slots) {
2366
+ return slots.map(slot => new ParagraphComponent(textbus, {
2487
2367
  slot
2488
- });
2368
+ }));
2489
2369
  }
2490
2370
  });
2491
2371
  break;
@@ -2504,17 +2384,18 @@ function useBlockTransform() {
2504
2384
  commander.unApplyAttribute(headingAttr);
2505
2385
  commander.transform({
2506
2386
  targetType: TodolistComponent.type,
2507
- multipleSlot: false,
2508
2387
  slotFactory() {
2509
2388
  return new core$1.Slot([
2510
2389
  core$1.ContentType.InlineComponent,
2511
2390
  core$1.ContentType.Text
2512
2391
  ]);
2513
2392
  },
2514
- stateFactory(slot) {
2515
- return new TodolistComponent(textbus, {
2516
- checked: false,
2517
- slot
2393
+ stateFactory(slots) {
2394
+ return slots.map(slot => {
2395
+ return new TodolistComponent(textbus, {
2396
+ checked: false,
2397
+ slot
2398
+ });
2518
2399
  });
2519
2400
  }
2520
2401
  });
@@ -2524,18 +2405,19 @@ function useBlockTransform() {
2524
2405
  {
2525
2406
  commander.transform({
2526
2407
  targetType: ListComponent.type,
2527
- multipleSlot: false,
2528
2408
  slotFactory() {
2529
2409
  return new core$1.Slot([
2530
2410
  core$1.ContentType.InlineComponent,
2531
2411
  core$1.ContentType.Text
2532
2412
  ]);
2533
2413
  },
2534
- stateFactory(slot) {
2535
- return new ListComponent(textbus, {
2536
- type: value === 'ol' ? 'OrderedList' : 'UnorderedList',
2537
- reorder: true,
2538
- slot
2414
+ stateFactory(slots) {
2415
+ return slots.map((slot, index) => {
2416
+ return new ListComponent(textbus, {
2417
+ type: value === 'ol' ? 'OrderedList' : 'UnorderedList',
2418
+ reorder: index === 0,
2419
+ slot
2420
+ });
2539
2421
  });
2540
2422
  }
2541
2423
  });
@@ -2583,16 +2465,17 @@ function useBlockTransform() {
2583
2465
  if (state.state === core$1.QueryStateType.Enabled) {
2584
2466
  commander.transform({
2585
2467
  targetType: ParagraphComponent.type,
2586
- multipleSlot: false,
2587
2468
  slotFactory() {
2588
2469
  return new core$1.Slot([
2589
2470
  core$1.ContentType.InlineComponent,
2590
2471
  core$1.ContentType.Text
2591
2472
  ]);
2592
2473
  },
2593
- stateFactory(slot) {
2594
- return new ParagraphComponent(textbus, {
2595
- slot
2474
+ stateFactory(slots) {
2475
+ return slots.map(slot => {
2476
+ return new ParagraphComponent(textbus, {
2477
+ slot
2478
+ });
2596
2479
  });
2597
2480
  }
2598
2481
  });
@@ -2600,24 +2483,23 @@ function useBlockTransform() {
2600
2483
  else {
2601
2484
  commander.transform({
2602
2485
  targetType: SourceCodeComponent.type,
2603
- multipleSlot: true,
2604
2486
  slotFactory() {
2605
2487
  return new core$1.Slot([
2606
2488
  core$1.ContentType.Text
2607
2489
  ]);
2608
2490
  },
2609
2491
  stateFactory(slots) {
2610
- return new SourceCodeComponent(textbus, {
2611
- lang: '',
2612
- lineNumber: true,
2613
- autoBreak: true,
2614
- slots: slots.map(slot => {
2615
- return {
2616
- slot,
2617
- emphasize: false
2618
- };
2619
- })
2620
- });
2492
+ return [new SourceCodeComponent(textbus, {
2493
+ lang: '',
2494
+ lineNumber: true,
2495
+ autoBreak: true,
2496
+ slots: slots.map(slot => {
2497
+ return {
2498
+ slot,
2499
+ emphasize: false
2500
+ };
2501
+ })
2502
+ })];
2621
2503
  }
2622
2504
  });
2623
2505
  }
@@ -3097,14 +2979,13 @@ function CodeTool() {
3097
2979
  };
3098
2980
  }
3099
2981
 
3100
- var css_248z$f = ".color-type[vf-1fbbdf]{font-size:13px;padding:5px 0}.text-colors[vf-1fbbdf]{font-size:14px;overflow:hidden}.text-colors div[vf-1fbbdf]{border:1px solid #eee;border-radius:4px;box-sizing:border-box;cursor:pointer;float:left;height:22px;line-height:20px;margin:4px 3px;text-align:center;width:22px}.text-colors div.active[vf-1fbbdf]{box-shadow:0 0 0 2px #296eff}.text-colors div[vf-1fbbdf]:hover{box-shadow:0 0 0 2px rgba(41,110,255,.188)}.background-colors[vf-1fbbdf]{font-size:14px;overflow:hidden}.background-colors div[vf-1fbbdf]{border-radius:4px;color:#fff;cursor:pointer;float:left;height:22px;line-height:22px;margin:4px 3px;text-align:center;width:22px}.background-colors div.active[vf-1fbbdf]{box-shadow:0 0 0 2px #296eff}.background-colors div[vf-1fbbdf]:hover{box-shadow:0 0 0 2px rgba(41,110,255,.188)}.background-colors .no-background[vf-1fbbdf]{border:1px solid #eee;box-sizing:border-box;overflow:hidden;position:relative}.background-colors .no-background[vf-1fbbdf]:before{background:#aaa;content:\"\";height:1px;left:-28px;position:absolute;top:0;transform:rotate(-45deg);width:100px}.background[vf-1fbbdf]{display:inline-block;height:1em;margin-right:6px;position:relative;text-align:center;width:1em}.background>span[vf-1fbbdf]{border-radius:4px;height:20px;left:-2px;line-height:20px;position:absolute;top:-2px;width:20px}";
3101
2982
  var scopedId$a = "vf-1fbbdf";
3102
- styleInject(css_248z$f);
3103
2983
 
3104
2984
  function ColorTool(props) {
3105
2985
  const query = core.inject(core$1.Query);
3106
2986
  const refreshService = core.inject(exports.RefreshService);
3107
2987
  const commander = core.inject(core$1.Commander);
2988
+ const selection = core.inject(core$1.Selection);
3108
2989
  const textColor = core.createSignal('');
3109
2990
  const backgroundColor = core.createSignal('');
3110
2991
  const [viewModel] = hooks.useProduce({
@@ -3112,13 +2993,24 @@ function ColorTool(props) {
3112
2993
  disabled: false,
3113
2994
  });
3114
2995
  function updateCheckState() {
3115
- var _a, _b;
3116
- (_a = props.queryBefore) === null || _a === void 0 ? void 0 : _a.call(props);
3117
- const textState = query.queryFormat(colorFormatter);
3118
- const backgroundState = query.queryFormat(backgroundColorFormatter);
2996
+ if (!props.slot && !selection.isSelected) {
2997
+ return;
2998
+ }
2999
+ const range = props.slot ? {
3000
+ startSlot: props.slot,
3001
+ endSlot: props.slot,
3002
+ startOffset: 0,
3003
+ endOffset: props.slot.length
3004
+ } : {
3005
+ startSlot: selection.startSlot,
3006
+ startOffset: selection.startOffset,
3007
+ endSlot: selection.endSlot,
3008
+ endOffset: selection.endOffset
3009
+ };
3010
+ const textState = query.queryFormatByRange(colorFormatter, range);
3011
+ const backgroundState = query.queryFormatByRange(backgroundColorFormatter, range);
3119
3012
  textColor.set(textState.state === core$1.QueryStateType.Enabled ? textState.value : '');
3120
3013
  backgroundColor.set(backgroundState.state === core$1.QueryStateType.Enabled ? backgroundState.value : '');
3121
- (_b = props.queryAfter) === null || _b === void 0 ? void 0 : _b.call(props);
3122
3014
  }
3123
3015
  const sub = refreshService.onRefresh.subscribe(() => {
3124
3016
  updateCheckState();
@@ -3134,6 +3026,7 @@ function ColorTool(props) {
3134
3026
  '#ffdf14',
3135
3027
  '#5eec75',
3136
3028
  '#5dfaff',
3029
+ '#1296db',
3137
3030
  '#617fff',
3138
3031
  '#c459ff',
3139
3032
  ];
@@ -3355,9 +3248,7 @@ function ItalicTool() {
3355
3248
  };
3356
3249
  }
3357
3250
 
3358
- var css_248z$e = ".input-group[vf-269a0b]{display:flex;padding:5px 10px}.input-group input[vf-269a0b]{border:1px solid #ddd;border-radius:4px;margin-right:5px;padding:2px 6px}.input-group input[vf-269a0b]:focus{border-color:#296eff}.input-group button[vf-269a0b]{border:1px solid #ddd;border-radius:4px;font-size:14px}";
3359
3251
  var scopedId$9 = "vf-269a0b";
3360
- styleInject(css_248z$e);
3361
3252
 
3362
3253
  function LinkTool(props) {
3363
3254
  const selectionBridge = core.inject(platformBrowser.SelectionBridge);
@@ -3457,20 +3348,107 @@ function UnderlineTool() {
3457
3348
  };
3458
3349
  }
3459
3350
 
3460
- var css_248z$d = ".btn-group[vf-cf8e1c]{font-size:15px;padding:5px 0;text-align:center}.btn-group button[vf-cf8e1c]{margin:2px 5px}";
3461
3351
  var scopedId$8 = "vf-cf8e1c";
3462
- styleInject(css_248z$d);
3352
+
3353
+ class FileUploader {
3354
+ }
3355
+
3356
+ class ImageComponent extends core$1.Component {
3357
+ static fromJSON(textbus, json) {
3358
+ return new ImageComponent(textbus, Object.assign({}, json));
3359
+ }
3360
+ }
3361
+ ImageComponent.type = core$1.ContentType.InlineComponent;
3362
+ ImageComponent.componentName = 'ImageComponent';
3363
+ function ImageView(props) {
3364
+ const { name, state } = props.component;
3365
+ const imageRef = core.createRef();
3366
+ const readonly = useReadonly();
3367
+ const output = useOutput();
3368
+ return () => {
3369
+ if (readonly() || output()) {
3370
+ return (jsxRuntime.jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx("img", { alt: "", src: state.src, style: {
3371
+ width: state.width,
3372
+ height: state.height
3373
+ } }) }));
3374
+ }
3375
+ return (jsxRuntime.jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx(DragResize, { source: imageRef, component: props.component, children: jsxRuntime.jsx("img", { alt: "", ref: imageRef, src: state.src, style: {
3376
+ width: state.width,
3377
+ height: state.height
3378
+ } }) }) }));
3379
+ };
3380
+ }
3381
+ const imageComponentLoader = {
3382
+ match(element) {
3383
+ return element.tagName === 'IMG' || element.dataset.component === ImageComponent.componentName;
3384
+ },
3385
+ read(element, textbus) {
3386
+ var _a;
3387
+ return new ImageComponent(textbus, {
3388
+ src: element instanceof HTMLImageElement ? element.src : ((_a = element.querySelector('img')) === null || _a === void 0 ? void 0 : _a.src) || ''
3389
+ });
3390
+ }
3391
+ };
3392
+
3393
+ class VideoComponent extends core$1.Component {
3394
+ static fromJSON(textbus, json) {
3395
+ return new VideoComponent(textbus, Object.assign({}, json));
3396
+ }
3397
+ setup() {
3398
+ //
3399
+ }
3400
+ }
3401
+ VideoComponent.type = core$1.ContentType.InlineComponent;
3402
+ VideoComponent.componentName = 'VideoComponent';
3403
+ function VideoView(props) {
3404
+ const { name, state } = props.component;
3405
+ const videoRef = core.createRef();
3406
+ const readonly = useReadonly();
3407
+ const output = useOutput();
3408
+ return () => {
3409
+ if (readonly() || output()) {
3410
+ return (jsxRuntime.jsx("div", { class: "xnote-video", "data-component": name, children: jsxRuntime.jsx("video", { ref: videoRef, src: state.src, style: {
3411
+ width: state.width,
3412
+ height: state.height
3413
+ } }) }));
3414
+ }
3415
+ return (jsxRuntime.jsx("div", { ref: props.rootRef, class: "xnote-video", "data-component": name, children: jsxRuntime.jsx(DragResize, { source: videoRef, component: props.component, children: jsxRuntime.jsx("video", { ref: videoRef, src: state.src, style: {
3416
+ width: state.width,
3417
+ height: state.height
3418
+ } }) }) }));
3419
+ };
3420
+ }
3421
+ const videoComponentLoader = {
3422
+ match(element) {
3423
+ return element.tagName === 'IMG' || element.dataset.component === VideoComponent.componentName;
3424
+ },
3425
+ read(element, textbus) {
3426
+ var _a;
3427
+ return new VideoComponent(textbus, {
3428
+ src: element instanceof HTMLImageElement ? element.src : ((_a = element.querySelector('video')) === null || _a === void 0 ? void 0 : _a.src) || ''
3429
+ });
3430
+ }
3431
+ };
3463
3432
 
3464
3433
  function InsertTool(props) {
3465
3434
  const commander = core.inject(core$1.Commander);
3466
3435
  const selection = core.inject(core$1.Selection);
3467
3436
  const textbus = core.inject(core$1.Textbus);
3437
+ const fileUploader = core.inject(FileUploader, null);
3468
3438
  function insert(type) {
3469
3439
  var _a;
3470
3440
  const component = (_a = props.slot) === null || _a === void 0 ? void 0 : _a.parent;
3471
3441
  if (!component) {
3472
3442
  return;
3473
3443
  }
3444
+ function insertComponent(comp) {
3445
+ if (props.replace) {
3446
+ commander.replaceComponent(component, comp);
3447
+ }
3448
+ else {
3449
+ commander.insertAfter(comp, component);
3450
+ }
3451
+ }
3474
3452
  switch (type) {
3475
3453
  case 'h1':
3476
3454
  case 'h2':
@@ -3485,12 +3463,12 @@ function InsertTool(props) {
3485
3463
  core$1.ContentType.Text
3486
3464
  ]);
3487
3465
  if (/h[1-6]/.test(type)) {
3488
- slot.setAttribute(headingAttr, +type.substring(1));
3466
+ slot.setAttribute(headingAttr, type);
3489
3467
  }
3490
3468
  const p = new ParagraphComponent(textbus, {
3491
3469
  slot
3492
3470
  });
3493
- commander.insertAfter(p, component);
3471
+ insertComponent(p);
3494
3472
  selection.setPosition(slot, 0);
3495
3473
  }
3496
3474
  break;
@@ -3506,7 +3484,7 @@ function InsertTool(props) {
3506
3484
  reorder: true,
3507
3485
  type: type === 'ol' ? 'OrderedList' : 'UnorderedList'
3508
3486
  });
3509
- commander.insertAfter(list, component);
3487
+ insertComponent(list);
3510
3488
  selection.setPosition(slot, 0);
3511
3489
  }
3512
3490
  break;
@@ -3523,14 +3501,14 @@ function InsertTool(props) {
3523
3501
  emphasize: false
3524
3502
  }]
3525
3503
  });
3526
- commander.insertAfter(comp, component);
3504
+ insertComponent(comp);
3527
3505
  selection.setPosition(slot, 0);
3528
3506
  }
3529
3507
  break;
3530
3508
  case 'table':
3531
3509
  {
3532
3510
  const table = new TableComponent(textbus);
3533
- commander.insertAfter(table, component);
3511
+ insertComponent(table);
3534
3512
  selection.setPosition(table.state.rows[0].cells[0].slot, 0);
3535
3513
  }
3536
3514
  break;
@@ -3544,20 +3522,36 @@ function InsertTool(props) {
3544
3522
  slot,
3545
3523
  checked: false
3546
3524
  });
3547
- commander.insertAfter(comp, component);
3525
+ insertComponent(comp);
3548
3526
  selection.setPosition(slot, 0);
3549
3527
  }
3550
3528
  break;
3551
3529
  case 'image':
3530
+ if (fileUploader) {
3531
+ Promise.resolve(fileUploader.uploadFile('image')).then(url => {
3532
+ const img = new ImageComponent(textbus, {
3533
+ src: url
3534
+ });
3535
+ commander.insert(img);
3536
+ });
3537
+ }
3552
3538
  break;
3553
3539
  case 'video':
3540
+ if (fileUploader) {
3541
+ Promise.resolve(fileUploader.uploadFile('video')).then(url => {
3542
+ const img = new VideoComponent(textbus, {
3543
+ src: url
3544
+ });
3545
+ commander.insert(img);
3546
+ });
3547
+ }
3554
3548
  break;
3555
3549
  case 'highlightBox':
3556
3550
  {
3557
3551
  const p = new ParagraphComponent(textbus);
3558
3552
  const comp = new HighlightBoxComponent(textbus);
3559
3553
  comp.state.slot.insert(p);
3560
- commander.insertAfter(comp, component);
3554
+ insertComponent(comp);
3561
3555
  selection.setPosition(p.state.slot, 0);
3562
3556
  }
3563
3557
  break;
@@ -3568,9 +3562,7 @@ function InsertTool(props) {
3568
3562
  });
3569
3563
  }
3570
3564
 
3571
- var css_248z$c = ".left-toolbar[vf-b05292]{font-size:15px;left:-10px;position:absolute;top:0;z-index:10}.left-toolbar-btn-wrap[vf-b05292]{position:absolute;transition:all .2s}.left-toolbar-btn[vf-b05292]{background:#fff;border:1px solid #ddd;border-radius:5px;cursor:pointer;height:26px}.left-toolbar-btn span[vf-b05292]{align-items:center;display:inline-flex}.btn-group[vf-b05292]{font-size:15px;padding:5px 0;text-align:center}.btn-group button[vf-b05292]{margin:2px 5px}";
3572
3565
  var scopedId$7 = "vf-b05292";
3573
- styleInject(css_248z$c);
3574
3566
 
3575
3567
  const LeftToolbar = core.withAnnotation({
3576
3568
  providers: [exports.RefreshService]
@@ -3598,11 +3590,12 @@ const LeftToolbar = core.withAnnotation({
3598
3590
  top: 0,
3599
3591
  display: false
3600
3592
  });
3593
+ let isIgnoreMove = false;
3601
3594
  core.onMounted(() => {
3602
3595
  const rootComponent = rootComponentRef.component;
3603
3596
  const docContentContainer = adapter.getNativeNodeBySlot(rootComponent.state.content);
3604
3597
  const sub = core$1.fromEvent(docContentContainer, 'mousemove').pipe(core$1.filter(() => {
3605
- return selection.isCollapsed;
3598
+ return !isIgnoreMove;
3606
3599
  }), core$1.map(ev => {
3607
3600
  let currentNode = ev.target;
3608
3601
  while (currentNode) {
@@ -3677,18 +3670,6 @@ const LeftToolbar = core.withAnnotation({
3677
3670
  isShow.set(true);
3678
3671
  }));
3679
3672
  });
3680
- let snapshot = null;
3681
- function queryBefore() {
3682
- const slot = activeSlot();
3683
- if (slot) {
3684
- snapshot = selection.createSnapshot();
3685
- selection.selectSlot(slot);
3686
- }
3687
- }
3688
- function queryAfter() {
3689
- snapshot === null || snapshot === void 0 ? void 0 : snapshot.restore();
3690
- snapshot = null;
3691
- }
3692
3673
  function applyBefore() {
3693
3674
  const slot = activeSlot();
3694
3675
  if (slot) {
@@ -3729,11 +3710,14 @@ const LeftToolbar = core.withAnnotation({
3729
3710
  }
3730
3711
  }
3731
3712
  const isEmptyBlock = core.createSignal(true);
3713
+ function changeIgnoreMove(b) {
3714
+ isIgnoreMove = b;
3715
+ }
3732
3716
  return scopedCss.withScopedCSS(scopedId$7, () => {
3733
3717
  const position = positionSignal();
3734
3718
  const slot = activeSlot();
3735
3719
  let activeNode = jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" });
3736
- const states = checkStates();
3720
+ const states = checkStates(slot);
3737
3721
  if (slot) {
3738
3722
  const types = [
3739
3723
  [states.paragraph, jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" })],
@@ -3761,11 +3745,14 @@ const LeftToolbar = core.withAnnotation({
3761
3745
  left: position.left + 'px',
3762
3746
  top: position.top + 'px',
3763
3747
  display: position.display && selection.isCollapsed ? 'block' : 'none'
3764
- }, children: jsxRuntime.jsx(Dropdown, { abreast: true, style: {
3748
+ }, children: jsxRuntime.jsx(Dropdown, { onExpendStateChange: changeIgnoreMove, abreast: true, style: {
3765
3749
  position: 'absolute',
3766
3750
  right: 0,
3767
3751
  top: 0
3768
- }, menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }) })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(AttrTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, queryBefore: queryBefore, queryAfter: queryAfter, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsxRuntime.jsx(ColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, queryBefore: queryBefore, queryAfter: queryAfter, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-color" }), children: "\u989C\u8272" }) }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(MenuItem, { onClick: copy, icon: jsxRuntime.jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsxRuntime.jsx(MenuItem, { onClick: remove, icon: jsxRuntime.jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsxRuntime.jsx(MenuItem, { onClick: cut, icon: jsxRuntime.jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsxRuntime.jsx(InsertTool, { slot: activeSlot() }), children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsxRuntime.jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
3752
+ }, menu: isEmptyBlock() ?
3753
+ jsxRuntime.jsx(InsertTool, { replace: true, slot: activeSlot() })
3754
+ :
3755
+ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { class: "btn-group", children: [jsxRuntime.jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsxRuntime.jsx("span", { class: "xnote-icon-list" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" }) }), jsxRuntime.jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }) })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(AttrTool, { style: { display: 'block' }, abreast: true, slot: slot, applyBefore: applyBefore, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsxRuntime.jsx(ColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-color" }), children: "\u989C\u8272" }) }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(MenuItem, { onClick: copy, icon: jsxRuntime.jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsxRuntime.jsx(MenuItem, { onClick: remove, icon: jsxRuntime.jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsxRuntime.jsx(MenuItem, { onClick: cut, icon: jsxRuntime.jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsxRuntime.jsx(InsertTool, { slot: activeSlot() }), children: jsxRuntime.jsx(MenuItem, { arrow: true, icon: jsxRuntime.jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsxRuntime.jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
3769
3756
  jsxRuntime.jsx("span", { children: jsxRuntime.jsx("i", { class: "xnote-icon-plus" }) })
3770
3757
  :
3771
3758
  jsxRuntime.jsxs("span", { children: [activeNode, jsxRuntime.jsx("i", { style: "font-size: 12px", class: "xnote-icon-more" })] }) }) }) }) }));
@@ -3774,12 +3761,7 @@ const LeftToolbar = core.withAnnotation({
3774
3761
 
3775
3762
  class LeftToolbarPlugin {
3776
3763
  constructor() {
3777
- Object.defineProperty(this, "app", {
3778
- enumerable: true,
3779
- configurable: true,
3780
- writable: true,
3781
- value: null
3782
- });
3764
+ this.app = null;
3783
3765
  }
3784
3766
  setup(injector) {
3785
3767
  const App = function () {
@@ -3794,7 +3776,7 @@ class LeftToolbarPlugin {
3794
3776
  nativeRenderer: new platformBrowser$1.DomRenderer(),
3795
3777
  autoUpdate: true
3796
3778
  });
3797
- const viewDocument = injector.get(platformBrowser.VIEW_DOCUMENT);
3779
+ const viewDocument = injector.get(platformBrowser.VIEW_CONTAINER);
3798
3780
  const host = document.createElement('div');
3799
3781
  viewDocument.appendChild(host);
3800
3782
  this.app.mount(host);
@@ -3805,18 +3787,11 @@ class LeftToolbarPlugin {
3805
3787
  }
3806
3788
  }
3807
3789
 
3808
- var css_248z$b = ".toolbar[vf-fee98b]{background:#fff;border:1px solid #dee0e3;border-radius:5px;box-shadow:0 4px 8px rgba(0,0,0,.08);box-sizing:border-box;display:flex;font-size:13px;height:36px;opacity:0;padding:0 6px;pointer-events:none;position:absolute;text-align:left;transform:translateX(-50%);transition-duration:.4s;transition-property:all;transition-timing-function:ease;z-index:3}";
3809
3790
  var scopedId$6 = "vf-fee98b";
3810
- styleInject(css_248z$b);
3811
3791
 
3812
3792
  exports.EditorService = class EditorService {
3813
3793
  constructor() {
3814
- Object.defineProperty(this, "hideInlineToolbar", {
3815
- enumerable: true,
3816
- configurable: true,
3817
- writable: true,
3818
- value: false
3819
- });
3794
+ this.hideInlineToolbar = false;
3820
3795
  }
3821
3796
  };
3822
3797
  exports.EditorService = __decorate([
@@ -3829,7 +3804,7 @@ const Toolbar = core.withAnnotation({
3829
3804
  providers: [exports.RefreshService]
3830
3805
  }, function Toolbar() {
3831
3806
  const selection = core.inject(core$1.Selection);
3832
- const viewDocument = core.inject(platformBrowser.VIEW_DOCUMENT);
3807
+ const viewDocument = core.inject(platformBrowser.VIEW_CONTAINER);
3833
3808
  const bridge = core.inject(platformBrowser.SelectionBridge);
3834
3809
  const textbus = core.inject(core$1.Textbus);
3835
3810
  const editorService = core.inject(exports.EditorService);
@@ -3867,7 +3842,6 @@ const Toolbar = core.withAnnotation({
3867
3842
  selectionFocusRect.top + selectionFocusRect.height - docRect.top + 10 :
3868
3843
  selectionFocusRect.top - docRect.top - toolbarRect.height - 10;
3869
3844
  updateViewPosition(draft => {
3870
- draft.isHide = false;
3871
3845
  draft.transitionDuration = .15;
3872
3846
  draft.left = centerLeft - docRect.left;
3873
3847
  draft.top = top + 10;
@@ -3895,6 +3869,7 @@ const Toolbar = core.withAnnotation({
3895
3869
  }), core$1.map(getTop), core$1.delay(200)).subscribe((top) => {
3896
3870
  if (top !== null) {
3897
3871
  updateViewPosition(draft => {
3872
+ draft.isHide = false;
3898
3873
  draft.opacity = 1;
3899
3874
  draft.top = top;
3900
3875
  });
@@ -3937,12 +3912,7 @@ const Toolbar = core.withAnnotation({
3937
3912
 
3938
3913
  class ToolbarPlugin {
3939
3914
  constructor() {
3940
- Object.defineProperty(this, "app", {
3941
- enumerable: true,
3942
- configurable: true,
3943
- writable: true,
3944
- value: null
3945
- });
3915
+ this.app = null;
3946
3916
  }
3947
3917
  setup(injector) {
3948
3918
  const App = function () {
@@ -3967,30 +3937,10 @@ class ToolbarPlugin {
3967
3937
 
3968
3938
  class Matcher {
3969
3939
  constructor(target, rule) {
3970
- Object.defineProperty(this, "target", {
3971
- enumerable: true,
3972
- configurable: true,
3973
- writable: true,
3974
- value: target
3975
- });
3976
- Object.defineProperty(this, "rule", {
3977
- enumerable: true,
3978
- configurable: true,
3979
- writable: true,
3980
- value: rule
3981
- });
3982
- Object.defineProperty(this, "validators", {
3983
- enumerable: true,
3984
- configurable: true,
3985
- writable: true,
3986
- value: []
3987
- });
3988
- Object.defineProperty(this, "excludeValidators", {
3989
- enumerable: true,
3990
- configurable: true,
3991
- writable: true,
3992
- value: []
3993
- });
3940
+ this.target = target;
3941
+ this.rule = rule;
3942
+ this.validators = [];
3943
+ this.excludeValidators = [];
3994
3944
  if (rule.tags) {
3995
3945
  this.validators.push(this.makeTagsMatcher(rule.tags));
3996
3946
  }
@@ -4082,155 +4032,47 @@ class Matcher {
4082
4032
  }
4083
4033
  }
4084
4034
 
4085
- var css_248z$a = ".xnote-image{display:inline-block}.xnote-image,.xnote-image img{max-width:100%}";
4086
- styleInject(css_248z$a);
4087
-
4088
- class ImageComponent extends core$1.Component {
4089
- static fromJSON(textbus, json) {
4090
- return new ImageComponent(textbus, Object.assign({}, json));
4091
- }
4092
- }
4093
- Object.defineProperty(ImageComponent, "type", {
4094
- enumerable: true,
4095
- configurable: true,
4096
- writable: true,
4097
- value: core$1.ContentType.InlineComponent
4098
- });
4099
- Object.defineProperty(ImageComponent, "componentName", {
4100
- enumerable: true,
4101
- configurable: true,
4102
- writable: true,
4103
- value: 'ImageComponent'
4104
- });
4105
- function ImageView(props) {
4106
- const { name, state } = props.component;
4107
- const imageRef = core.createRef();
4108
- const readonly = useReadonly();
4109
- const output = useOutput();
4110
- return () => {
4111
- if (readonly() || output()) {
4112
- return (jsxRuntime.jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx("img", { alt: "", src: state.src, style: {
4113
- width: state.width,
4114
- height: state.height
4115
- } }) }));
4116
- }
4117
- return (jsxRuntime.jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsxRuntime.jsx(DragResize, { source: imageRef, component: props.component, children: jsxRuntime.jsx("img", { alt: "", ref: imageRef, src: state.src, style: {
4118
- width: state.width,
4119
- height: state.height
4120
- } }) }) }));
4121
- };
4122
- }
4123
- const imageComponentLoader = {
4124
- match(element) {
4125
- return element.tagName === 'IMG' || element.dataset.component === ImageComponent.componentName;
4126
- },
4127
- read(element, textbus) {
4128
- var _a;
4129
- return new ImageComponent(textbus, {
4130
- src: element instanceof HTMLImageElement ? element.src : ((_a = element.querySelector('img')) === null || _a === void 0 ? void 0 : _a.src) || ''
4131
- });
4132
- }
4133
- };
4134
-
4135
- var css_248z$9 = ".xnote-root{color:#1f2329}.xnote-root * ::selection{background:rgba(20,99,252,.34)}.xnote-title{font-size:30px;font-weight:600;margin:36px 0 22px}.xnote-title:before{content:attr(data-placeholder);opacity:.5;position:absolute}.xnote-content{font-size:16px;line-height:1.65}.xnote-content:before{content:attr(data-placeholder);opacity:.5;position:absolute}";
4136
- styleInject(css_248z$9);
4137
-
4138
4035
  class RootComponent extends core$1.Component {
4139
4036
  constructor() {
4140
4037
  super(...arguments);
4141
- Object.defineProperty(this, "onCompositionStart", {
4142
- enumerable: true,
4143
- configurable: true,
4144
- writable: true,
4145
- value: new core$1.Subject()
4146
- });
4038
+ this.onCompositionStart = new core$1.Subject();
4147
4039
  }
4148
4040
  static fromJSON(textbus, json) {
4149
- const heading = textbus.get(core$1.Registry).createSlot(json.heading);
4150
4041
  const content = textbus.get(core$1.Registry).createSlot(json.content);
4151
4042
  return new RootComponent(textbus, {
4152
- heading,
4153
4043
  content
4154
4044
  });
4155
4045
  }
4156
4046
  setup() {
4157
- const textbus = core$1.useContext();
4158
- const selection = textbus.get(core$1.Selection);
4159
- core$1.onBreak(ev => {
4160
- if (ev.target === this.state.heading) {
4161
- const afterContent = ev.target.cut(ev.data.index);
4162
- const p = new ParagraphComponent(textbus, {
4163
- slot: afterContent
4164
- });
4165
- const body = this.state.content;
4166
- body.retain(0);
4167
- body.insert(p);
4168
- selection.setPosition(afterContent, 0);
4169
- ev.preventDefault();
4170
- }
4171
- });
4172
4047
  useBlockContent(this.state.content);
4173
4048
  core$1.onCompositionStart(ev => {
4174
4049
  this.onCompositionStart.next(ev);
4175
4050
  });
4176
4051
  }
4177
- afterCheck() {
4178
- const content = this.state.content;
4179
- const lastContent = content.getContentAtIndex(content.length - 1);
4180
- if (lastContent instanceof ParagraphComponent ||
4181
- lastContent instanceof ListComponent ||
4182
- lastContent instanceof TodolistComponent) {
4183
- return;
4184
- }
4185
- content.retain(content.length);
4186
- content.insert(new ParagraphComponent(this.textbus));
4187
- }
4188
4052
  }
4189
- Object.defineProperty(RootComponent, "componentName", {
4190
- enumerable: true,
4191
- configurable: true,
4192
- writable: true,
4193
- value: 'RootComponent'
4194
- });
4195
- Object.defineProperty(RootComponent, "type", {
4196
- enumerable: true,
4197
- configurable: true,
4198
- writable: true,
4199
- value: core$1.ContentType.BlockComponent
4200
- });
4053
+ RootComponent.componentName = 'RootComponent';
4054
+ RootComponent.type = core$1.ContentType.BlockComponent;
4201
4055
  function RootView(props) {
4202
4056
  const adapter = core.inject(platformBrowser.DomAdapter);
4203
- const { heading, content } = props.component.state;
4057
+ const { content } = props.component.state;
4204
4058
  const ref = core.createDynamicRef(node => {
4205
- const sub = props.component.onCompositionStart.subscribe(ev => {
4206
- if (ev.target === heading) {
4207
- node.children[0].dataset.placeholder = '';
4208
- }
4209
- else {
4210
- node.children[1].dataset.placeholder = '';
4211
- }
4059
+ const sub = props.component.onCompositionStart.subscribe(() => {
4060
+ node.children[0].dataset.placeholder = '';
4212
4061
  });
4213
4062
  return () => {
4214
4063
  sub.unsubscribe();
4215
4064
  };
4216
4065
  });
4217
- core.onUpdated(() => {
4218
- props.component.afterCheck();
4219
- });
4220
4066
  const readonly = useReadonly();
4067
+ const output = useOutput();
4221
4068
  return () => {
4222
4069
  const { rootRef } = props;
4223
- return (jsxRuntime.jsxs("div", { class: "xnote-root", ref: [rootRef, ref], children: [adapter.slotRender(heading, children => {
4224
- return (core$1.createVNode('div', {
4225
- class: 'xnote-title',
4226
- 'data-placeholder': heading.isEmpty ? '请输入标题' : ''
4227
- }, children));
4228
- }, readonly()), adapter.slotRender(content, children => {
4229
- return (core$1.createVNode('div', {
4230
- class: 'xnote-content',
4231
- 'data-placeholder': content.isEmpty ? '请输入内容' : ''
4232
- }, children));
4233
- }, readonly())] }));
4070
+ return (jsxRuntime.jsx("div", { class: "xnote-root", ref: [rootRef, ref], children: adapter.slotRender(content, children => {
4071
+ return (core$1.createVNode('div', {
4072
+ class: 'xnote-content',
4073
+ 'data-placeholder': content.isEmpty ? '请输入内容' : ''
4074
+ }, children));
4075
+ }, readonly() || output()) }));
4234
4076
  };
4235
4077
  }
4236
4078
  const rootComponentLoader = {
@@ -4255,45 +4097,15 @@ const rootComponentLoader = {
4255
4097
  }
4256
4098
  };
4257
4099
 
4258
- var css_248z$8 = ".xnote-table{margin-bottom:16px;margin-top:16px;position:relative}.xnote-table-content{border-collapse:collapse;border-spacing:0}.xnote-table-content.hide-selection * ::selection{background:none}.xnote-table-content td{border:1px solid #ddd;padding:0 10px}.xnote-table-container,.xnote-table-wrapper{position:relative}.xnote-table-delete-btn{background:#eee;border:none;border-radius:4px;color:#5c6370;cursor:pointer;height:30px;line-height:30px;width:24px}.xnote-table-delete-btn:hover{color:#333}";
4259
- styleInject(css_248z$8);
4260
-
4261
- var css_248z$7 = ".drag-line[vf-681de2]{border-color:transparent;border-style:solid;border-width:0 5px;bottom:0;box-sizing:content-box;cursor:col-resize;display:none;margin-left:-5px;position:absolute;top:0;width:2px}.drag-line[vf-681de2]:before{background:#296eff;content:\"\";inset:0;position:absolute}";
4262
4100
  var scopedId$5 = "vf-681de2";
4263
- styleInject(css_248z$7);
4264
4101
 
4265
4102
  let TableService = class TableService {
4266
4103
  constructor() {
4267
- Object.defineProperty(this, "onInsertRowBefore", {
4268
- enumerable: true,
4269
- configurable: true,
4270
- writable: true,
4271
- value: new core$1.Subject()
4272
- });
4273
- Object.defineProperty(this, "onInsertColumnBefore", {
4274
- enumerable: true,
4275
- configurable: true,
4276
- writable: true,
4277
- value: new core$1.Subject()
4278
- });
4279
- Object.defineProperty(this, "onSelectColumns", {
4280
- enumerable: true,
4281
- configurable: true,
4282
- writable: true,
4283
- value: new core$1.Subject()
4284
- });
4285
- Object.defineProperty(this, "onSelectRows", {
4286
- enumerable: true,
4287
- configurable: true,
4288
- writable: true,
4289
- value: new core$1.Subject()
4290
- });
4291
- Object.defineProperty(this, "onScroll", {
4292
- enumerable: true,
4293
- configurable: true,
4294
- writable: true,
4295
- value: new core$1.Subject()
4296
- });
4104
+ this.onInsertRowBefore = new core$1.Subject();
4105
+ this.onInsertColumnBefore = new core$1.Subject();
4106
+ this.onSelectColumns = new core$1.Subject();
4107
+ this.onSelectRows = new core$1.Subject();
4108
+ this.onScroll = new core$1.Subject();
4297
4109
  }
4298
4110
  };
4299
4111
  TableService = __decorate([
@@ -4342,16 +4154,19 @@ function ResizeColumn(props) {
4342
4154
  const initLeft = layoutWidth.slice(0, activeCol).reduce((a, b) => a + b, 0);
4343
4155
  const minWidth = 30;
4344
4156
  const minLeft = initLeft - initWidth + minWidth;
4157
+ const layoutWidthArr = layoutWidth.slice();
4345
4158
  const moveEvent = core$1.fromEvent(document, 'mousemove').subscribe(moveEvent => {
4346
4159
  const distanceX = moveEvent.clientX - x;
4347
4160
  dragLineRef.current.style.left = Math.max(initLeft + distanceX, minLeft) + 'px';
4348
- props.component.state.layoutWidth[activeCol - 1] = Math.max(initWidth + distanceX, minWidth);
4161
+ layoutWidthArr[activeCol - 1] = Math.max(initWidth + distanceX, minWidth);
4162
+ props.layoutWidth.set(layoutWidthArr.slice());
4349
4163
  }).add(core$1.fromEvent(document, 'mouseup').subscribe(upEvent => {
4350
4164
  isDrag = false;
4351
4165
  props.onActiveStateChange(false);
4352
4166
  moveEvent.unsubscribe();
4353
4167
  const distanceX = upEvent.clientX - x;
4354
4168
  props.component.state.layoutWidth[activeCol - 1] = Math.max(initWidth + distanceX, minWidth);
4169
+ props.layoutWidth.set(props.component.state.layoutWidth);
4355
4170
  }));
4356
4171
  }));
4357
4172
  return () => {
@@ -4377,9 +4192,7 @@ function ResizeColumn(props) {
4377
4192
  });
4378
4193
  }
4379
4194
 
4380
- var css_248z$6 = ".top-bar[vf-5bce97]{display:none;left:0;position:absolute;right:0;top:0}.top-bar.active[vf-5bce97]{display:block}.top-delete-toolbar[vf-5bce97]{height:0;position:relative;top:-10px}.toolbar-wrapper[vf-5bce97]{height:60px;left:0;pointer-events:none;position:absolute;right:0;top:-60px}.insert-bar[vf-5bce97]{height:30px;margin-left:-10px;margin-right:-10px;overflow:hidden;padding-left:10px;padding-right:10px;padding-top:30px}.insert-bar table[vf-5bce97]{border-collapse:collapse;border-spacing:0;position:relative;table-layout:fixed;z-index:1}.insert-bar table td[vf-5bce97]{border:1px solid transparent;box-sizing:border-box;height:18px;position:relative}.insert-bar table .tool-container[vf-5bce97]{height:18px}.insert-bar table .tool-container>div[vf-5bce97],.insert-bar table .tool-container>span[vf-5bce97]{pointer-events:auto}.insert-bar table .insert-btn-wrap[vf-5bce97]{cursor:pointer;height:21px;position:absolute;right:-11px;top:-2px;width:21px;z-index:1}.insert-bar table .insert-btn-wrap .insert-btn[vf-5bce97]{background:#ccc;border:none;border-radius:50%;box-shadow:none;color:#fff;cursor:inherit;font-size:16px;height:100%;line-height:20px;padding:0;position:relative;text-align:center;transform:scale(.2);transition:transform .15s;width:100%}.insert-bar table .insert-btn-wrap .insert-btn[vf-5bce97]:after{background:inherit;content:\"\";height:10px;left:5.5px;position:absolute;top:12px;transform:rotate(45deg);width:10px;z-index:-1}.insert-bar table .insert-btn-wrap:hover .insert-btn[vf-5bce97]{background:#296eff;transform:scale(1)}.action-bar[vf-5bce97]{margin-top:-12px;overflow:hidden;pointer-events:auto;position:relative;z-index:0}.action-bar.active[vf-5bce97]{display:block}.action-bar table[vf-5bce97]{border-collapse:collapse;border-spacing:0;overflow:hidden;table-layout:fixed}.action-bar table td[vf-5bce97]{background:#eee;border:1px solid #ddd;box-sizing:border-box;cursor:pointer;height:12px;position:relative}.action-bar table td[vf-5bce97]:hover{background:#dedede}.action-bar table td.active[vf-5bce97]{background:#296eff;border-color:#2358c9}.action-bar table td.active[vf-5bce97]:before{border-color:inherit;border-style:solid;border-width:0 0 0 1px;bottom:0;content:\"\";left:-1px;position:absolute;top:-1px}";
4381
- var scopedId$4 = "vf-5bce97";
4382
- styleInject(css_248z$6);
4195
+ var scopedId$4 = "vf-d64cf9";
4383
4196
 
4384
4197
  function TopBar(props) {
4385
4198
  const editorService = core.inject(exports.EditorService);
@@ -4454,7 +4267,7 @@ function TopBar(props) {
4454
4267
  active: props.isFocus()
4455
4268
  }], children: jsxRuntime.jsxs("div", { class: "toolbar-wrapper", children: [jsxRuntime.jsx("div", { class: "insert-bar", children: jsxRuntime.jsx("table", { style: {
4456
4269
  transform: `translateX(${-leftDistance()}px)`
4457
- }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: state.layoutWidth.map((i, index) => {
4270
+ }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: props.layoutWidth().map((i, index) => {
4458
4271
  return (jsxRuntime.jsx("td", { style: { width: i + 'px', minWidth: i + 'px' }, children: jsxRuntime.jsxs("div", { class: "tool-container", children: [index === 0 && (jsxRuntime.jsx("span", { onMouseenter: () => {
4459
4272
  tableService.onInsertColumnBefore.next(0);
4460
4273
  }, onMouseleave: () => {
@@ -4480,7 +4293,7 @@ function TopBar(props) {
4480
4293
  }, children: jsxRuntime.jsx("span", { class: "xnote-icon-bin" }) }) }) })] }) }));
4481
4294
  }) }) }) }) }), jsxRuntime.jsx("div", { class: ['action-bar', { active: props.isFocus() }], children: jsxRuntime.jsx("table", { style: {
4482
4295
  transform: `translateX(${-leftDistance()}px)`
4483
- }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: state.layoutWidth.map((i, index) => {
4296
+ }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: props.layoutWidth().map((i, index) => {
4484
4297
  return jsxRuntime.jsx("td", { onClick: ev => {
4485
4298
  mouseDownFromToolbar = true;
4486
4299
  if (!ev.shiftKey) {
@@ -4500,9 +4313,7 @@ function TopBar(props) {
4500
4313
  });
4501
4314
  }
4502
4315
 
4503
- var css_248z$5 = ".scroll-container[vf-b1149b]{overflow-y:auto}.scroll-container[vf-b1149b]:before{background-image:linear-gradient(90deg,rgba(0,0,0,.1),transparent);border-left:1px solid #ddd;left:0}.scroll-container[vf-b1149b]:after,.scroll-container[vf-b1149b]:before{bottom:0;content:\"\";pointer-events:none;position:absolute;top:0;width:12px}.scroll-container[vf-b1149b]:after{background:linear-gradient(90deg,transparent,rgba(0,0,0,.1));border-right:1px solid #ddd;right:0}.scroll-container.left-end[vf-b1149b]:before,.scroll-container.right-end[vf-b1149b]:after{display:none}";
4504
4316
  var scopedId$3 = "vf-b1149b";
4505
- styleInject(css_248z$5);
4506
4317
 
4507
4318
  function Scroll(props) {
4508
4319
  const scrollRef = core.createRef();
@@ -4546,9 +4357,7 @@ function Scroll(props) {
4546
4357
  });
4547
4358
  }
4548
4359
 
4549
- var css_248z$4 = ".left-bar[vf-ef93c0]{display:none;left:0;margin-left:-30px;position:absolute;top:0;width:30px}.left-bar.active[vf-ef93c0]{display:flex}.toolbar-item[vf-ef93c0]{align-items:center;display:flex;inset:0;position:absolute}.insert-bar[vf-ef93c0]{width:18px}.insert-bar table[vf-ef93c0]{border-collapse:collapse;border-spacing:0;table-layout:fixed}.insert-bar table td[vf-ef93c0]{border:1px solid transparent;position:relative}.insert-bar table .insert-btn-wrap[vf-ef93c0]{bottom:-8px;cursor:pointer;height:21px;left:0;position:absolute;width:21px;z-index:1}.insert-bar table .insert-btn-wrap .insert-btn[vf-ef93c0]{background:#ccc;border:none;border-radius:50%;box-shadow:none;color:#fff;cursor:inherit;font-size:16px;height:100%;line-height:20px;padding:0;position:relative;text-align:center;transform:scale(.2);transition:transform .15s;width:100%}.insert-bar table .insert-btn-wrap .insert-btn[vf-ef93c0]:after{background:inherit;content:\"\";height:10px;left:11px;position:absolute;top:5.5px;transform:rotate(45deg);width:10px;z-index:-1}.insert-bar table .insert-btn-wrap:hover .insert-btn[vf-ef93c0]{background:#296eff;transform:scale(1)}.action-bar[vf-ef93c0]{width:12px}.action-bar table[vf-ef93c0]{border-collapse:collapse;border-spacing:0;table-layout:fixed;width:13px}.action-bar table td[vf-ef93c0]{background:#eee;border:1px solid #ddd;box-sizing:border-box;cursor:pointer;height:12px;position:relative}.action-bar table td[vf-ef93c0]:hover{background:#dedede}.action-bar table td.active[vf-ef93c0]{background:#296eff;border-color:#2358c9}.action-bar table td.active[vf-ef93c0]:before{border-color:inherit;border-style:solid;border-width:1px 0 0;content:\"\";left:-1px;position:absolute;right:-1px;top:-1px}";
4550
4360
  var scopedId$2 = "vf-ef93c0";
4551
- styleInject(css_248z$4);
4552
4361
 
4553
4362
  function LeftBar(props) {
4554
4363
  const editorService = core.inject(exports.EditorService);
@@ -4670,9 +4479,7 @@ function LeftBar(props) {
4670
4479
  });
4671
4480
  }
4672
4481
 
4673
- var css_248z$3 = ".drag-line[vf-d4c4a9]{background:#296eff;contain:layout size style;height:2px;left:0;max-width:100%;position:absolute;right:0;z-index:1}";
4674
4482
  var scopedId$1 = "vf-d4c4a9";
4675
- styleInject(css_248z$3);
4676
4483
 
4677
4484
  function sum(numbers) {
4678
4485
  return numbers.reduce((a, b) => a + b, 0);
@@ -4714,9 +4521,7 @@ function ResizeRow(props) {
4714
4521
  });
4715
4522
  }
4716
4523
 
4717
- var css_248z$2 = ".mask[vf-e16878]{background:rgba(41,110,255,.063);border:1px solid #296eff;display:none;pointer-events:none;position:absolute}.mask.active[vf-e16878]{display:block}";
4718
- var scopedId = "vf-e16878";
4719
- styleInject(css_248z$2);
4524
+ var scopedId = "vf-4a5ad1";
4720
4525
 
4721
4526
  function SelectionMask(props) {
4722
4527
  const [styles, updateStyles] = hooks.useProduce({
@@ -4787,9 +4592,14 @@ const TableComponentView = core.withAnnotation({
4787
4592
  providers: [TableService]
4788
4593
  }, function TableComponentView(props) {
4789
4594
  const adapter = core.inject(platformBrowser.DomAdapter);
4595
+ const editorService = core.inject(exports.EditorService);
4790
4596
  const isFocus = core.createSignal(false);
4597
+ const layoutWidth = core.createSignal(props.component.state.layoutWidth);
4791
4598
  const subscription = props.component.focus.subscribe(b => {
4792
4599
  isFocus.set(b);
4600
+ if (!b) {
4601
+ editorService.hideInlineToolbar = false;
4602
+ }
4793
4603
  });
4794
4604
  core.onUnmounted(() => {
4795
4605
  subscription.unsubscribe();
@@ -4797,67 +4607,6 @@ const TableComponentView = core.withAnnotation({
4797
4607
  const tableRef = core.createRef();
4798
4608
  const scrollRef = core.createRef();
4799
4609
  const isResizeColumn = core.createSignal(false);
4800
- const selection = core.inject(core$1.Selection);
4801
- const findPosition = (slot) => {
4802
- let cell = slot;
4803
- while ((cell === null || cell === void 0 ? void 0 : cell.parent) && cell.parent !== props.component) {
4804
- cell = cell.parentSlot;
4805
- }
4806
- if (cell) {
4807
- const rows = props.component.state.rows;
4808
- for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
4809
- const row = rows[rowIndex].cells;
4810
- for (let colIndex = 0; colIndex < row.length; colIndex++) {
4811
- const item = row[colIndex].slot;
4812
- if (item === cell) {
4813
- return {
4814
- rowIndex,
4815
- colIndex
4816
- };
4817
- }
4818
- }
4819
- }
4820
- }
4821
- return null;
4822
- };
4823
- core.onMounted(() => {
4824
- const sub = selection.onChange.subscribe(() => {
4825
- var _a;
4826
- if (selection.commonAncestorComponent !== props.component || selection.isCollapsed) {
4827
- props.component.tableSelection.set(null);
4828
- return;
4829
- }
4830
- const startPosition = findPosition(selection.startSlot);
4831
- const endPosition = findPosition(selection.endSlot);
4832
- if (startPosition && endPosition) {
4833
- if (startPosition.rowIndex === endPosition.rowIndex && startPosition.colIndex === endPosition.colIndex) {
4834
- if (selection.startSlot === selection.endSlot && selection.startOffset === 0 && selection.endOffset === ((_a = selection.startSlot) === null || _a === void 0 ? void 0 : _a.length)) {
4835
- props.component.tableSelection.set({
4836
- startColumn: startPosition.colIndex,
4837
- startRow: startPosition.rowIndex,
4838
- endColumn: endPosition.colIndex + 1,
4839
- endRow: endPosition.rowIndex + 1
4840
- });
4841
- return;
4842
- }
4843
- props.component.tableSelection.set(null);
4844
- return;
4845
- }
4846
- const [startColumn, endColumn] = [startPosition.colIndex, endPosition.colIndex].sort((a, b) => a - b);
4847
- const [startRow, endRow] = [startPosition.rowIndex, endPosition.rowIndex].sort((a, b) => a - b);
4848
- props.component.tableSelection.set({
4849
- startColumn,
4850
- startRow,
4851
- endColumn: endColumn + 1,
4852
- endRow: endRow + 1
4853
- });
4854
- }
4855
- else {
4856
- props.component.tableSelection.set(null);
4857
- }
4858
- });
4859
- return () => sub.unsubscribe();
4860
- });
4861
4610
  const rowMapping = new WeakMap();
4862
4611
  const readonly = useReadonly();
4863
4612
  const output = useOutput();
@@ -4879,7 +4628,7 @@ const TableComponentView = core.withAnnotation({
4879
4628
  {
4880
4629
  'hide-selection': props.component.tableSelection()
4881
4630
  }
4882
- ], children: [jsxRuntime.jsx("colgroup", { children: state.layoutWidth.map(w => {
4631
+ ], children: [jsxRuntime.jsx("colgroup", { children: layoutWidth().map(w => {
4883
4632
  return jsxRuntime.jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
4884
4633
  }) }), jsxRuntime.jsx("tbody", { children: rows.map((row) => {
4885
4634
  return (jsxRuntime.jsx("tr", { children: row.cells.map(cell => {
@@ -4887,16 +4636,16 @@ const TableComponentView = core.withAnnotation({
4887
4636
  return core$1.createVNode('td', {
4888
4637
  key: cell.slot.id
4889
4638
  }, children);
4890
- }, readonly());
4639
+ }, readonly() || output());
4891
4640
  }) }, rowMapping.get(row)));
4892
4641
  }) })] }) }) }));
4893
4642
  }
4894
- return (jsxRuntime.jsxs("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": state.layoutWidth, ref: props.rootRef, children: [jsxRuntime.jsx(TopBar, { isFocus: isFocus, component: props.component, scrollRef: scrollRef }), jsxRuntime.jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsxRuntime.jsx(Scroll, { scrollRef: scrollRef, isFocus: isFocus, children: jsxRuntime.jsxs("div", { class: "xnote-table-container", children: [jsxRuntime.jsxs("table", { ref: tableRef, class: [
4643
+ return (jsxRuntime.jsxs("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": state.layoutWidth, ref: props.rootRef, children: [jsxRuntime.jsx(TopBar, { isFocus: isFocus, layoutWidth: layoutWidth, component: props.component, scrollRef: scrollRef }), jsxRuntime.jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsxRuntime.jsx(Scroll, { scrollRef: scrollRef, isFocus: isFocus, children: jsxRuntime.jsxs("div", { class: "xnote-table-container", children: [jsxRuntime.jsxs("table", { ref: tableRef, class: [
4895
4644
  'xnote-table-content',
4896
4645
  {
4897
4646
  'hide-selection': props.component.tableSelection()
4898
4647
  }
4899
- ], children: [jsxRuntime.jsx("colgroup", { children: state.layoutWidth.map(w => {
4648
+ ], children: [jsxRuntime.jsx("colgroup", { children: layoutWidth().map(w => {
4900
4649
  return jsxRuntime.jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
4901
4650
  }) }), jsxRuntime.jsx("tbody", { children: rows.map((row) => {
4902
4651
  return (jsxRuntime.jsx("tr", { children: row.cells.map(cell => {
@@ -4904,9 +4653,9 @@ const TableComponentView = core.withAnnotation({
4904
4653
  return core$1.createVNode('td', {
4905
4654
  key: cell.slot.id
4906
4655
  }, children);
4907
- }, readonly());
4656
+ }, readonly() || output());
4908
4657
  }) }, rowMapping.get(row)));
4909
- }) })] }), jsxRuntime.jsx(ResizeColumn, { tableRef: tableRef, component: props.component, onActiveStateChange: isActive => {
4658
+ }) })] }), jsxRuntime.jsx(ResizeColumn, { tableRef: tableRef, component: props.component, layoutWidth: layoutWidth, onActiveStateChange: isActive => {
4910
4659
  isResizeColumn.set(isActive);
4911
4660
  } }), jsxRuntime.jsx(SelectionMask, { tableRef: tableRef, component: props.component })] }) }), jsxRuntime.jsx(ResizeRow, { component: props.component, tableRef: tableRef })] }));
4912
4661
  };
@@ -4929,8 +4678,6 @@ const tableComponentLoader = {
4929
4678
  Array.from(row.cells).forEach(cell => {
4930
4679
  const slot = new core$1.Slot([
4931
4680
  core$1.ContentType.BlockComponent,
4932
- core$1.ContentType.InlineComponent,
4933
- core$1.ContentType.Text
4934
4681
  ]);
4935
4682
  arr.push({
4936
4683
  slot,
@@ -4939,8 +4686,6 @@ const tableComponentLoader = {
4939
4686
  });
4940
4687
  const delta = slotParser(new core$1.Slot([
4941
4688
  core$1.ContentType.BlockComponent,
4942
- core$1.ContentType.InlineComponent,
4943
- core$1.ContentType.Text
4944
4689
  ]), cell).toDelta();
4945
4690
  const results = deltaToBlock(delta, textbus);
4946
4691
  results.forEach(i => {
@@ -4958,8 +4703,6 @@ const tableComponentLoader = {
4958
4703
  Array.from(row.cells).forEach(cell => {
4959
4704
  const slot = new core$1.Slot([
4960
4705
  core$1.ContentType.BlockComponent,
4961
- core$1.ContentType.InlineComponent,
4962
- core$1.ContentType.Text
4963
4706
  ]);
4964
4707
  arr.push({
4965
4708
  slot,
@@ -4968,8 +4711,6 @@ const tableComponentLoader = {
4968
4711
  });
4969
4712
  const delta = slotParser(new core$1.Slot([
4970
4713
  core$1.ContentType.BlockComponent,
4971
- core$1.ContentType.InlineComponent,
4972
- core$1.ContentType.Text
4973
4714
  ]), cell).toDelta();
4974
4715
  const results = deltaToBlock(delta, textbus);
4975
4716
  results.forEach(i => {
@@ -5046,8 +4787,6 @@ function autoComplete(table) {
5046
4787
  rowspan: 1,
5047
4788
  colspan: 1,
5048
4789
  slot: new core$1.Slot([
5049
- core$1.ContentType.Text,
5050
- core$1.ContentType.InlineComponent,
5051
4790
  core$1.ContentType.BlockComponent
5052
4791
  ])
5053
4792
  };
@@ -5067,65 +4806,9 @@ function autoComplete(table) {
5067
4806
  });
5068
4807
  }
5069
4808
 
5070
- var css_248z$1 = ".xnote-video{display:inline-block}.xnote-video,.xnote-video video{max-width:100%}";
5071
- styleInject(css_248z$1);
5072
-
5073
- class VideoComponent extends core$1.Component {
5074
- static fromJSON(textbus, json) {
5075
- return new VideoComponent(textbus, Object.assign({}, json));
5076
- }
5077
- setup() {
5078
- //
5079
- }
5080
- }
5081
- Object.defineProperty(VideoComponent, "type", {
5082
- enumerable: true,
5083
- configurable: true,
5084
- writable: true,
5085
- value: core$1.ContentType.InlineComponent
5086
- });
5087
- Object.defineProperty(VideoComponent, "componentName", {
5088
- enumerable: true,
5089
- configurable: true,
5090
- writable: true,
5091
- value: 'VideoComponent'
5092
- });
5093
- function VideoView(props) {
5094
- const { name, state } = props.component;
5095
- const videoRef = core.createRef();
5096
- const readonly = useReadonly();
5097
- const output = useOutput();
5098
- return () => {
5099
- if (readonly() || output()) {
5100
- return (jsxRuntime.jsx("div", { class: "xnote-video", "data-component": name, children: jsxRuntime.jsx("video", { ref: videoRef, src: state.src, style: {
5101
- width: state.width,
5102
- height: state.height
5103
- } }) }));
5104
- }
5105
- return (jsxRuntime.jsx("div", { ref: props.rootRef, class: "xnote-video", "data-component": name, children: jsxRuntime.jsx(DragResize, { source: videoRef, component: props.component, children: jsxRuntime.jsx("video", { ref: videoRef, src: state.src, style: {
5106
- width: state.width,
5107
- height: state.height
5108
- } }) }) }));
5109
- };
5110
- }
5111
- const videoComponentLoader = {
5112
- match(element) {
5113
- return element.tagName === 'IMG' || element.dataset.component === VideoComponent.componentName;
5114
- },
5115
- read(element, textbus) {
5116
- var _a;
5117
- return new VideoComponent(textbus, {
5118
- src: element instanceof HTMLImageElement ? element.src : ((_a = element.querySelector('video')) === null || _a === void 0 ? void 0 : _a.src) || ''
5119
- });
5120
- }
5121
- };
5122
-
5123
- var css_248z = ".xnote-h1{font-size:2.2em;font-weight:600}.xnote-h2{font-size:1.8em;font-weight:600}.xnote-h3{font-size:1.4em;font-weight:600}.xnote-h4{font-size:1em;font-weight:600}.xnote-h5{font-size:.9em;font-weight:600}.xnote-h6{font-size:.8em;font-weight:600}.xnote-code{border:1px solid rgba(0,0,0,.2);border-radius:4px;font-family:Microsoft YaHei Mono,Menlo,Monaco,Consolas,Courier New,monospace;margin:0 3px;padding:2px 3px}";
5124
- styleInject(css_248z);
5125
-
5126
- function createXNote(host, config = {}) {
5127
- return __awaiter(this, void 0, void 0, function* () {
5128
- const adapter = new adapterViewfly.Adapter({
4809
+ class Editor extends core$1.Textbus {
4810
+ constructor(editorConfig = {}) {
4811
+ const adapter = new adapterViewfly.ViewflyAdapter({
5129
4812
  [ParagraphComponent.componentName]: ParagraphView,
5130
4813
  [RootComponent.componentName]: RootView,
5131
4814
  [BlockquoteComponent.componentName]: BlockquoteView,
@@ -5136,8 +4819,8 @@ function createXNote(host, config = {}) {
5136
4819
  [ListComponent.componentName]: ListComponentView,
5137
4820
  [ImageComponent.componentName]: ImageView,
5138
4821
  [VideoComponent.componentName]: VideoView
5139
- }, (host, root) => {
5140
- const appInjector = new core.ReflectiveInjector(textbus, [{
4822
+ }, (host, root, injector) => {
4823
+ const appInjector = new core.ReflectiveInjector(injector, [{
5141
4824
  provide: OutputInjectionToken,
5142
4825
  useValue: false
5143
4826
  }]);
@@ -5148,23 +4831,19 @@ function createXNote(host, config = {}) {
5148
4831
  app.destroy();
5149
4832
  };
5150
4833
  });
5151
- const browserModule = new platformBrowser.BrowserModule({
5152
- renderTo() {
5153
- return host;
5154
- },
5155
- adapter,
5156
- componentLoaders: [
4834
+ const browserModule = new platformBrowser.BrowserModule(Object.assign({ renderTo: () => {
4835
+ return this.host;
4836
+ }, adapter, componentLoaders: [
4837
+ sourceCodeComponentLoader,
4838
+ tableComponentLoader,
4839
+ imageComponentLoader,
4840
+ videoComponentLoader,
5157
4841
  highlightBoxComponentLoader,
5158
4842
  blockquoteComponentLoader,
5159
4843
  paragraphComponentLoader,
5160
- sourceCodeComponentLoader,
5161
4844
  todolistComponentLoader,
5162
- tableComponentLoader,
5163
4845
  listComponentLoader,
5164
- imageComponentLoader,
5165
- videoComponentLoader
5166
- ],
5167
- formatLoaders: [
4846
+ ], formatLoaders: [
5168
4847
  backgroundColorFormatLoader,
5169
4848
  boldFormatLoader,
5170
4849
  codeFormatLoader,
@@ -5175,22 +4854,45 @@ function createXNote(host, config = {}) {
5175
4854
  linkFormatLoader,
5176
4855
  strikeThroughFormatLoader,
5177
4856
  underlineFormatLoader
5178
- ],
5179
- attributeLoaders: [
4857
+ ], attributeLoaders: [
5180
4858
  headingAttrLoader,
5181
4859
  textAlignAttrLoader,
5182
4860
  textIndentAttrLoader
5183
- ]
5184
- });
4861
+ ] }, editorConfig.viewOptions));
5185
4862
  const modules = [browserModule];
5186
- if (config.collaborateConfig) {
5187
- modules.push(new collaborate.CollaborateModule(config.collaborateConfig));
4863
+ if (editorConfig.collaborateConfig) {
4864
+ modules.push(new collaborate.CollaborateModule(editorConfig.collaborateConfig));
5188
4865
  }
5189
- const textbus = new core$1.Textbus({
5190
- zenCoding: true,
5191
- readonly: config.readonly,
5192
- imports: modules,
5193
- components: [
4866
+ const vDomAdapter = new adapterViewfly.ViewflyVDomAdapter({
4867
+ [ParagraphComponent.componentName]: ParagraphView,
4868
+ [RootComponent.componentName]: RootView,
4869
+ [BlockquoteComponent.componentName]: BlockquoteView,
4870
+ [TodolistComponent.componentName]: TodolistView,
4871
+ [SourceCodeComponent.componentName]: SourceCodeView,
4872
+ [TableComponent.componentName]: TableComponentView,
4873
+ [HighlightBoxComponent.componentName]: HighlightBoxView,
4874
+ [ListComponent.componentName]: ListComponentView,
4875
+ [ImageComponent.componentName]: ImageView,
4876
+ [VideoComponent.componentName]: VideoView
4877
+ }, (host, root, injector) => {
4878
+ const appInjector = new core.ReflectiveInjector(injector, [{
4879
+ provide: OutputInjectionToken,
4880
+ useValue: true
4881
+ }, {
4882
+ provide: platformBrowser.DomAdapter,
4883
+ useFactory: () => {
4884
+ return vDomAdapter;
4885
+ }
4886
+ }]);
4887
+ const app = platformBrowser$1.createApp(root, {
4888
+ context: appInjector,
4889
+ nativeRenderer: new platformBrowser$1.HTMLRenderer()
4890
+ }).mount(host);
4891
+ return () => {
4892
+ app.destroy();
4893
+ };
4894
+ });
4895
+ super(Object.assign({ zenCoding: true, additionalAdapters: [vDomAdapter], imports: modules, components: [
5194
4896
  ImageComponent,
5195
4897
  ParagraphComponent,
5196
4898
  RootComponent,
@@ -5201,8 +4903,7 @@ function createXNote(host, config = {}) {
5201
4903
  HighlightBoxComponent,
5202
4904
  ListComponent,
5203
4905
  VideoComponent
5204
- ],
5205
- formatters: [
4906
+ ], formatters: [
5206
4907
  backgroundColorFormatter,
5207
4908
  boldFormatter,
5208
4909
  codeFormatter,
@@ -5213,18 +4914,14 @@ function createXNote(host, config = {}) {
5213
4914
  linkFormatter,
5214
4915
  strikeThroughFormatter,
5215
4916
  underlineFormatter
5216
- ],
5217
- attributes: [
4917
+ ], attributes: [
5218
4918
  headingAttr,
5219
4919
  textAlignAttr,
5220
4920
  textIndentAttr
5221
- ],
5222
- providers: [],
5223
- plugins: [
4921
+ ], plugins: [
5224
4922
  new LeftToolbarPlugin(),
5225
4923
  new ToolbarPlugin(),
5226
- ],
5227
- onAfterStartup(textbus) {
4924
+ ], onAfterStartup(textbus) {
5228
4925
  registerBoldShortcut(textbus);
5229
4926
  registerCodeShortcut(textbus);
5230
4927
  registerItalicShortcut(textbus);
@@ -5233,27 +4930,32 @@ function createXNote(host, config = {}) {
5233
4930
  registerHeadingShortcut(textbus);
5234
4931
  registerTextAlignShortcut(textbus);
5235
4932
  registerTextIndentShortcut(textbus);
5236
- }
5237
- });
4933
+ } }, editorConfig));
4934
+ this.editorConfig = editorConfig;
4935
+ this.translator = new platformBrowser$1.OutputTranslator();
4936
+ this.vDomAdapter = vDomAdapter;
4937
+ }
4938
+ mount(host) {
4939
+ this.host = host;
5238
4940
  let rootComp;
4941
+ const config = this.editorConfig;
5239
4942
  if (config.content) {
5240
- const parser = textbus.get(platformBrowser.Parser);
4943
+ const parser = this.get(platformBrowser.Parser);
5241
4944
  const doc = parser.parseDoc(config.content, rootComponentLoader);
5242
- rootComp = doc instanceof core$1.Component ? doc : new RootComponent(textbus, {
5243
- heading: new core$1.Slot([core$1.ContentType.Text]),
4945
+ rootComp = doc instanceof core$1.Component ? doc : new RootComponent(this, {
5244
4946
  content: doc
5245
4947
  });
5246
4948
  }
5247
4949
  else {
5248
- rootComp = new RootComponent(textbus, {
5249
- heading: new core$1.Slot([core$1.ContentType.Text]),
5250
- content: new core$1.Slot([core$1.ContentType.Text, core$1.ContentType.InlineComponent, core$1.ContentType.BlockComponent])
4950
+ rootComp = new RootComponent(this, {
4951
+ content: new core$1.Slot([core$1.ContentType.BlockComponent])
5251
4952
  });
5252
4953
  }
5253
- yield textbus.render(rootComp);
5254
- // console.log(rootComp)
5255
- return textbus;
5256
- });
4954
+ return this.render(rootComp);
4955
+ }
4956
+ getHTML() {
4957
+ return this.translator.transform(this.vDomAdapter.host);
4958
+ }
5257
4959
  }
5258
4960
 
5259
4961
  exports.AttrTool = AttrTool;
@@ -5269,6 +4971,7 @@ exports.Divider = Divider;
5269
4971
  exports.DragResize = DragResize;
5270
4972
  exports.Dropdown = Dropdown;
5271
4973
  exports.DropdownMenuPortal = DropdownMenuPortal;
4974
+ exports.Editor = Editor;
5272
4975
  exports.FontFamilyTool = FontFamilyTool;
5273
4976
  exports.FontSizeTool = FontSizeTool;
5274
4977
  exports.HighlightBoxComponent = HighlightBoxComponent;
@@ -5313,7 +5016,6 @@ exports.codeFormatLoader = codeFormatLoader;
5313
5016
  exports.codeFormatter = codeFormatter;
5314
5017
  exports.colorFormatLoader = colorFormatLoader;
5315
5018
  exports.colorFormatter = colorFormatter;
5316
- exports.createXNote = createXNote;
5317
5019
  exports.deltaToBlock = deltaToBlock;
5318
5020
  exports.fontFamilyFormatLoader = fontFamilyFormatLoader;
5319
5021
  exports.fontFamilyFormatter = fontFamilyFormatter;