@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.esm.js CHANGED
@@ -1,44 +1,15 @@
1
1
  import { jsxs, jsx, Fragment } from '@viewfly/core/jsx-runtime';
2
2
  import { withScopedCSS } from '@viewfly/scoped-css';
3
- import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, createRef, withAnnotation, onMounted, InjectionToken, viewfly, createDynamicRef, onUpdated, getCurrentInstance, watch, ReflectiveInjector } from '@viewfly/core';
4
- import { Subject, Selection, fromEvent, Subscription, Attribute, Keyboard, Commander, Controller, ContentType, Component, Registry, Slot, useContext, onBreak, createVNode, BehaviorSubject, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, Query, QueryStateType, onContentInsert, onFocusIn, onFocusOut, onGetRanges, Formatter, onParentSlotUpdated, Textbus, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, merge, debounceTime, throttleTime, delay, onCompositionStart } from '@textbus/core';
3
+ import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, createRef, withAnnotation, onMounted, InjectionToken, viewfly, createDynamicRef, getCurrentInstance, onUpdated, watch, ReflectiveInjector } from '@viewfly/core';
4
+ import { Subject, Selection, fromEvent, Subscription, Attribute, Keyboard, Commander, Controller, ContentType, Component, Registry, Slot, useContext, onBreak, createVNode, BehaviorSubject, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, Query, QueryStateType, onContentInsert, onFocusIn, onFocusOut, onDestroy, onGetRanges, Formatter, onParentSlotUpdated, Textbus, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, merge, debounceTime, throttleTime, delay, onCompositionStart } from '@textbus/core';
5
5
  import { VIEW_CONTAINER, DomAdapter, Input, SelectionBridge, VIEW_DOCUMENT, BrowserModule, Parser } from '@textbus/platform-browser';
6
- import { createPortal, DomRenderer, createApp } from '@viewfly/platform-browser';
6
+ import { createPortal, DomRenderer, createApp, HTMLRenderer, OutputTranslator } from '@viewfly/platform-browser';
7
7
  import { useProduce } from '@viewfly/hooks';
8
8
  import highlightjs from 'highlight.js';
9
- import { Adapter } from '@textbus/adapter-viewfly';
9
+ import { ViewflyAdapter, ViewflyVDomAdapter } from '@textbus/adapter-viewfly';
10
10
  import { CollaborateModule } from '@textbus/collaborate';
11
11
 
12
- function styleInject(css, ref) {
13
- if ( ref === void 0 ) ref = {};
14
- var insertAt = ref.insertAt;
15
-
16
- if (!css || typeof document === 'undefined') { return; }
17
-
18
- var head = document.head || document.getElementsByTagName('head')[0];
19
- var style = document.createElement('style');
20
- style.type = 'text/css';
21
-
22
- if (insertAt === 'top') {
23
- if (head.firstChild) {
24
- head.insertBefore(style, head.firstChild);
25
- } else {
26
- head.appendChild(style);
27
- }
28
- } else {
29
- head.appendChild(style);
30
- }
31
-
32
- if (style.styleSheet) {
33
- style.styleSheet.cssText = css;
34
- } else {
35
- style.appendChild(document.createTextNode(css));
36
- }
37
- }
38
-
39
- 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}";
40
- var scopedId$k = "vf-69b4db";
41
- styleInject(css_248z$v);
12
+ var scopedId$k = "vf-3d0183";
42
13
 
43
14
  /******************************************************************************
44
15
  Copyright (c) Microsoft Corporation.
@@ -68,16 +39,6 @@ function __metadata(metadataKey, metadataValue) {
68
39
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
69
40
  }
70
41
 
71
- function __awaiter(thisArg, _arguments, P, generator) {
72
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
73
- return new (P || (P = Promise))(function (resolve, reject) {
74
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
75
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
76
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
77
- step((generator = generator.apply(thisArg, _arguments || [])).next());
78
- });
79
- }
80
-
81
42
  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
82
43
  var e = new Error(message);
83
44
  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -85,18 +46,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
85
46
 
86
47
  let DropdownService = class DropdownService {
87
48
  constructor() {
88
- Object.defineProperty(this, "onSiblingOpen", {
89
- enumerable: true,
90
- configurable: true,
91
- writable: true,
92
- value: void 0
93
- });
94
- Object.defineProperty(this, "siblingOpenEvent", {
95
- enumerable: true,
96
- configurable: true,
97
- writable: true,
98
- value: new Subject()
99
- });
49
+ this.siblingOpenEvent = new Subject();
100
50
  this.onSiblingOpen = this.siblingOpenEvent.asObservable();
101
51
  }
102
52
  notify(id) {
@@ -114,60 +64,14 @@ var DropdownContextService_1;
114
64
  let i = 0;
115
65
  let DropdownContextService = DropdownContextService_1 = class DropdownContextService {
116
66
  constructor(dropdownService, injector) {
117
- Object.defineProperty(this, "dropdownService", {
118
- enumerable: true,
119
- configurable: true,
120
- writable: true,
121
- value: dropdownService
122
- });
123
- Object.defineProperty(this, "injector", {
124
- enumerable: true,
125
- configurable: true,
126
- writable: true,
127
- value: injector
128
- });
129
- Object.defineProperty(this, "id", {
130
- enumerable: true,
131
- configurable: true,
132
- writable: true,
133
- value: i
134
- });
135
- Object.defineProperty(this, "isOpen", {
136
- enumerable: true,
137
- configurable: true,
138
- writable: true,
139
- value: false
140
- });
141
- Object.defineProperty(this, "onOpenStateChange", {
142
- enumerable: true,
143
- configurable: true,
144
- writable: true,
145
- value: void 0
146
- });
147
- Object.defineProperty(this, "canHide", {
148
- enumerable: true,
149
- configurable: true,
150
- writable: true,
151
- value: true
152
- });
153
- Object.defineProperty(this, "openStateChangeEvent", {
154
- enumerable: true,
155
- configurable: true,
156
- writable: true,
157
- value: new Subject()
158
- });
159
- Object.defineProperty(this, "timer", {
160
- enumerable: true,
161
- configurable: true,
162
- writable: true,
163
- value: null
164
- });
165
- Object.defineProperty(this, "parentDropdownContextService", {
166
- enumerable: true,
167
- configurable: true,
168
- writable: true,
169
- value: this.injector.get(DropdownContextService_1, InjectFlags.SkipSelf, null)
170
- });
67
+ this.dropdownService = dropdownService;
68
+ this.injector = injector;
69
+ this.id = i;
70
+ this.isOpen = false;
71
+ this.canHide = true;
72
+ this.openStateChangeEvent = new Subject();
73
+ this.timer = null;
74
+ this.parentDropdownContextService = this.injector.get(DropdownContextService_1, null, InjectFlags.SkipSelf);
171
75
  this.onOpenStateChange = this.openStateChangeEvent.asObservable();
172
76
  dropdownService.onSiblingOpen.subscribe(id => {
173
77
  if (id === this.id) {
@@ -216,7 +120,7 @@ DropdownContextService = DropdownContextService_1 = __decorate([
216
120
  ], DropdownContextService);
217
121
 
218
122
  function Button(props) {
219
- const dropdownContextService = inject(DropdownContextService, InjectFlags.Optional, null);
123
+ const dropdownContextService = inject(DropdownContextService, null);
220
124
  const isActive = createSignal((dropdownContextService === null || dropdownContextService === void 0 ? void 0 : dropdownContextService.isOpen) || false);
221
125
  if (dropdownContextService) {
222
126
  const subscription = dropdownContextService.onOpenStateChange.subscribe(b => {
@@ -238,9 +142,7 @@ function Button(props) {
238
142
  });
239
143
  }
240
144
 
241
- 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}";
242
145
  var scopedId$j = "vf-ac7e8d";
243
- styleInject(css_248z$u);
244
146
 
245
147
  function ComponentToolbar(props) {
246
148
  return withScopedCSS(scopedId$j, () => {
@@ -253,9 +155,7 @@ function ComponentToolbar(props) {
253
155
  });
254
156
  }
255
157
 
256
- var css_248z$t = ".divider[vf-ede279]{border-top:1px solid #eee;margin:6px 0}";
257
158
  var scopedId$i = "vf-ede279";
258
- styleInject(css_248z$t);
259
159
 
260
160
  function Divider() {
261
161
  return withScopedCSS(scopedId$i, () => {
@@ -263,9 +163,7 @@ function Divider() {
263
163
  });
264
164
  }
265
165
 
266
- 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}";
267
166
  var scopedId$h = "vf-4c1803";
268
- styleInject(css_248z$s);
269
167
 
270
168
  function DragResize(props) {
271
169
  const isShow = createSignal(false);
@@ -380,13 +278,9 @@ function DragResize(props) {
380
278
  });
381
279
  }
382
280
 
383
- 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}";
384
281
  var scopedId$g = "vf-a99c5e";
385
- styleInject(css_248z$r);
386
282
 
387
- 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}";
388
- var scopedId$f = "vf-4f8cfb";
389
- styleInject(css_248z$q);
283
+ var scopedId$f = "vf-ab6f55";
390
284
 
391
285
  const DropdownMenuPortal = withAnnotation({
392
286
  providers: [
@@ -440,7 +334,7 @@ const DropdownMenuPortal = withAnnotation({
440
334
  menuElement.style.left = triggerRect.left + 'px';
441
335
  if (isToTop) {
442
336
  const maxHeight = Math.max(menuElement.scrollHeight, menuElement.offsetHeight);
443
- const height = Math.min(triggerRect.top - 20, maxHeight);
337
+ const height = Math.min(triggerRect.top - 20, maxHeight, 400);
444
338
  menuElement.style.height = height + 'px';
445
339
  menuElement.style.top = triggerRect.top - 20 - height + 'px';
446
340
  timer = setTimeout(() => {
@@ -493,6 +387,8 @@ const Dropdown = withAnnotation({
493
387
  const dropdownRef = createRef();
494
388
  onMounted(() => {
495
389
  const sub = dropdownContextService.onOpenStateChange.subscribe(b => {
390
+ var _a;
391
+ (_a = props.onExpendStateChange) === null || _a === void 0 ? void 0 : _a.call(props, b);
496
392
  isShow.set(b);
497
393
  });
498
394
  return () => sub.unsubscribe();
@@ -546,12 +442,10 @@ const Dropdown = withAnnotation({
546
442
  };
547
443
  });
548
444
 
549
- 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}";
550
- var scopedId$e = "vf-64f71d";
551
- styleInject(css_248z$p);
445
+ var scopedId$e = "vf-678daa";
552
446
 
553
447
  function MenuItem(props) {
554
- const dropdownContextService = inject(DropdownContextService, InjectFlags.Optional, null);
448
+ const dropdownContextService = inject(DropdownContextService, null);
555
449
  const isActive = createSignal((dropdownContextService === null || dropdownContextService === void 0 ? void 0 : dropdownContextService.isOpen) || false);
556
450
  if (dropdownContextService) {
557
451
  const subscription = dropdownContextService.onOpenStateChange.subscribe(b => {
@@ -578,9 +472,7 @@ function MenuItem(props) {
578
472
  });
579
473
  }
580
474
 
581
- 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}";
582
475
  var scopedId$d = "vf-a23c47";
583
- styleInject(css_248z$o);
584
476
 
585
477
  function Popup(props) {
586
478
  const host = inject(VIEW_CONTAINER);
@@ -592,9 +484,7 @@ function Popup(props) {
592
484
  }), host);
593
485
  }
594
486
 
595
- var css_248z$n = ".toolbar-item[vf-216815]{padding:3px}";
596
487
  var scopedId$c = "vf-216815";
597
- styleInject(css_248z$n);
598
488
 
599
489
  function ToolbarItem(props) {
600
490
  return withScopedCSS(scopedId$c, () => {
@@ -602,18 +492,11 @@ function ToolbarItem(props) {
602
492
  });
603
493
  }
604
494
 
605
- var css_248z$m = ".heading-icon[vf-2a8a65]{font-size:1.2em;font-weight:700}.heading-icon sub[vf-2a8a65]{font-weight:400}";
606
495
  var scopedId$b = "vf-2a8a65";
607
- styleInject(css_248z$m);
608
496
 
609
497
  let RefreshService = class RefreshService {
610
498
  constructor() {
611
- Object.defineProperty(this, "onRefresh", {
612
- enumerable: true,
613
- configurable: true,
614
- writable: true,
615
- value: new Subject()
616
- });
499
+ this.onRefresh = new Subject();
617
500
  }
618
501
  };
619
502
  RefreshService = __decorate([
@@ -656,12 +539,6 @@ function registerTextAlignShortcut(textbus) {
656
539
  });
657
540
  }
658
541
 
659
- 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}";
660
- styleInject(css_248z$l);
661
-
662
- var css_248z$k = ".xnote-paragraph p{margin:8px 0}";
663
- styleInject(css_248z$k);
664
-
665
542
  function useReadonly() {
666
543
  const controller = inject(Controller);
667
544
  const is = createSignal(controller.readonly);
@@ -671,6 +548,66 @@ function useReadonly() {
671
548
  return is;
672
549
  }
673
550
 
551
+ const OutputInjectionToken = new InjectionToken('OutputInjectionToken');
552
+
553
+ function useOutput() {
554
+ return createSignal(inject(OutputInjectionToken));
555
+ }
556
+
557
+ const headingAttr = new Attribute('Heading', {
558
+ render(node, formatValue) {
559
+ node.classes.add('xnote-' + formatValue);
560
+ }
561
+ });
562
+ const headingAttrLoader = {
563
+ match(element) {
564
+ return /H[1-6]/.test(element.tagName) || /(^|\s)xnote-h[1-6](\s|$)/.test(element.className);
565
+ },
566
+ read(element) {
567
+ if (/H[1-6]/.test(element.tagName)) {
568
+ return {
569
+ attribute: headingAttr,
570
+ value: element.tagName.toLowerCase()
571
+ };
572
+ }
573
+ return {
574
+ attribute: headingAttr,
575
+ value: element.className.substring(6)
576
+ };
577
+ }
578
+ };
579
+ function registerHeadingShortcut(textbus) {
580
+ const keyboard = textbus.get(Keyboard);
581
+ const commander = textbus.get(Commander);
582
+ const selection = textbus.get(Selection);
583
+ keyboard.addShortcut({
584
+ keymap: {
585
+ key: '123456'.split(''),
586
+ ctrlKey: true
587
+ },
588
+ action(key) {
589
+ commander.applyAttribute(headingAttr, 'h' + key);
590
+ }
591
+ });
592
+ keyboard.addZenCodingInterceptor({
593
+ match(content) {
594
+ return /^#{1,6}$/.test(content);
595
+ },
596
+ try(key) {
597
+ return key === ' ';
598
+ },
599
+ action(content) {
600
+ if (selection.commonAncestorComponent instanceof SourceCodeComponent) {
601
+ return false;
602
+ }
603
+ const commonAncestorSlot = selection.commonAncestorSlot;
604
+ commonAncestorSlot.cut();
605
+ commander.applyAttribute(headingAttr, 'h' + content.length);
606
+ return true;
607
+ }
608
+ });
609
+ }
610
+
674
611
  class ParagraphComponent extends Component {
675
612
  static fromJSON(textbus, json) {
676
613
  const slot = textbus.get(Registry).createSlot(json.slot);
@@ -692,6 +629,7 @@ class ParagraphComponent extends Component {
692
629
  const selection = injector.get(Selection);
693
630
  onBreak(ev => {
694
631
  const afterSlot = ev.target.cut(ev.data.index);
632
+ afterSlot.removeAttribute(headingAttr);
695
633
  const nextParagraph = new ParagraphComponent(injector, {
696
634
  slot: afterSlot
697
635
  });
@@ -701,38 +639,30 @@ class ParagraphComponent extends Component {
701
639
  });
702
640
  }
703
641
  }
704
- Object.defineProperty(ParagraphComponent, "componentName", {
705
- enumerable: true,
706
- configurable: true,
707
- writable: true,
708
- value: 'ParagraphComponent'
709
- });
710
- Object.defineProperty(ParagraphComponent, "type", {
711
- enumerable: true,
712
- configurable: true,
713
- writable: true,
714
- value: ContentType.BlockComponent
715
- });
642
+ ParagraphComponent.componentName = 'ParagraphComponent';
643
+ ParagraphComponent.type = ContentType.BlockComponent;
716
644
  function ParagraphView(props) {
717
645
  const adapter = inject(DomAdapter);
718
646
  const readonly = useReadonly();
647
+ const output = useOutput();
719
648
  return () => {
720
649
  const slot = props.component.state.slot;
721
650
  return (jsx("div", { class: "xnote-paragraph", ref: props.rootRef, "data-component": ParagraphComponent.name, children: adapter.slotRender(slot, children => {
722
651
  return (createVNode('p', null, children));
723
- }, readonly()) }));
652
+ }, readonly() || output()) }));
724
653
  };
725
654
  }
726
655
  const paragraphComponentLoader = {
727
656
  match(element) {
728
- return element.dataset.compoment === ParagraphComponent.name || element.tagName === 'P';
657
+ return element.dataset.compoment === ParagraphComponent.name || /P|H[1-6]/.test(element.tagName);
729
658
  },
730
659
  read(element, textbus, slotParser) {
660
+ const content = /P|H[1-6]/.test(element.tagName) ? element : element.children[0];
731
661
  const delta = slotParser(new Slot([
732
662
  ContentType.Text,
733
663
  ContentType.InlineComponent,
734
664
  ContentType.BlockComponent
735
- ]), element.tagName === 'P' ? element : element.children[0]).toDelta();
665
+ ]), content).toDelta();
736
666
  const results = deltaToBlock(delta, textbus);
737
667
  if (results.length === 1) {
738
668
  return results[0];
@@ -773,12 +703,6 @@ function deltaToBlock(delta, textbus) {
773
703
  return results;
774
704
  }
775
705
 
776
- const OutputInjectionToken = new InjectionToken('OutputInjectionToken');
777
-
778
- function useOutput() {
779
- return createSignal(inject(OutputInjectionToken));
780
- }
781
-
782
706
  const languageList = [{
783
707
  label: 'JavaScript',
784
708
  value: 'JavaScript',
@@ -874,42 +798,27 @@ function createCodeSlot() {
874
798
  class SourceCodeComponent extends Component {
875
799
  constructor() {
876
800
  super(...arguments);
877
- Object.defineProperty(this, "focus", {
878
- enumerable: true,
879
- configurable: true,
880
- writable: true,
881
- value: new BehaviorSubject(false)
882
- });
883
- Object.defineProperty(this, "cancelEmphasize", {
884
- enumerable: true,
885
- configurable: true,
886
- writable: true,
887
- value: () => {
888
- const selection = this.textbus.get(Selection);
889
- const slots = this.state.slots;
890
- const { startSlot, endSlot } = selection;
891
- let startIndex = slots.findIndex(i => i.slot === startSlot);
892
- const endIndex = slots.findIndex(i => i.slot === endSlot) + 1;
893
- for (; startIndex < endIndex; startIndex++) {
894
- slots[startIndex].emphasize = false;
895
- }
801
+ this.focus = new BehaviorSubject(false);
802
+ this.cancelEmphasize = () => {
803
+ const selection = this.textbus.get(Selection);
804
+ const slots = this.state.slots;
805
+ const { startSlot, endSlot } = selection;
806
+ let startIndex = slots.findIndex(i => i.slot === startSlot);
807
+ const endIndex = slots.findIndex(i => i.slot === endSlot) + 1;
808
+ for (; startIndex < endIndex; startIndex++) {
809
+ slots[startIndex].emphasize = false;
896
810
  }
897
- });
898
- Object.defineProperty(this, "emphasize", {
899
- enumerable: true,
900
- configurable: true,
901
- writable: true,
902
- value: () => {
903
- const selection = this.textbus.get(Selection);
904
- const slots = this.state.slots;
905
- const { startSlot, endSlot } = selection;
906
- let startIndex = slots.findIndex(i => i.slot === startSlot);
907
- const endIndex = slots.findIndex(i => i.slot === endSlot) + 1;
908
- for (; startIndex < endIndex; startIndex++) {
909
- slots[startIndex].emphasize = true;
910
- }
811
+ };
812
+ this.emphasize = () => {
813
+ const selection = this.textbus.get(Selection);
814
+ const slots = this.state.slots;
815
+ const { startSlot, endSlot } = selection;
816
+ let startIndex = slots.findIndex(i => i.slot === startSlot);
817
+ const endIndex = slots.findIndex(i => i.slot === endSlot) + 1;
818
+ for (; startIndex < endIndex; startIndex++) {
819
+ slots[startIndex].emphasize = true;
911
820
  }
912
- });
821
+ };
913
822
  }
914
823
  static fromJSON(textbus, json) {
915
824
  const registry = textbus.get(Registry);
@@ -1047,7 +956,7 @@ class SourceCodeComponent extends Component {
1047
956
  },
1048
957
  action() {
1049
958
  if (selection.isCollapsed) {
1050
- commander.insert(' ');
959
+ commander.insert(' ');
1051
960
  return;
1052
961
  }
1053
962
  const blocks = selection.getBlocks();
@@ -1080,68 +989,66 @@ class SourceCodeComponent extends Component {
1080
989
  }
1081
990
  });
1082
991
  }
992
+ removeSlot(slot) {
993
+ const slots = this.state.slots;
994
+ const index = slots.findIndex(i => i.slot === slot);
995
+ if (index > -1) {
996
+ slots.splice(index, 1);
997
+ return true;
998
+ }
999
+ return false;
1000
+ }
1083
1001
  }
1084
- Object.defineProperty(SourceCodeComponent, "type", {
1085
- enumerable: true,
1086
- configurable: true,
1087
- writable: true,
1088
- value: ContentType.BlockComponent
1089
- });
1090
- Object.defineProperty(SourceCodeComponent, "componentName", {
1091
- enumerable: true,
1092
- configurable: true,
1093
- writable: true,
1094
- value: 'SourceCodeComponent'
1095
- });
1096
- Object.defineProperty(SourceCodeComponent, "zenCoding", {
1097
- enumerable: true,
1098
- configurable: true,
1099
- writable: true,
1100
- value: {
1101
- key: 'Enter',
1102
- match(c) {
1002
+ SourceCodeComponent.type = ContentType.BlockComponent;
1003
+ SourceCodeComponent.componentName = 'SourceCodeComponent';
1004
+ SourceCodeComponent.zenCoding = {
1005
+ key: ['Enter', ' '],
1006
+ match(c, textbus) {
1007
+ const selection = textbus.get(Selection);
1008
+ if (selection.commonAncestorComponent instanceof ParagraphComponent) {
1103
1009
  const matchString = languageList.map(i => i.label || i.value).concat('js', 'ts').join('|').replace(/\+/, '\\+');
1104
1010
  const reg = new RegExp(`^\`\`\`(${matchString})$`, 'i');
1105
1011
  return reg.test(c);
1106
- },
1107
- createState(content) {
1108
- const matchString = content.replace(/`/g, '').replace(/\+/, '\\+');
1109
- for (const item of languageList) {
1110
- const reg = new RegExp(`^${matchString}$`, 'i');
1111
- if (reg.test(item.label || item.value)) {
1112
- return {
1113
- lang: item.value,
1114
- theme: '',
1115
- lineNumber: true,
1116
- slots: [createCodeSlot()]
1117
- };
1118
- }
1119
- }
1120
- if (/^js$/i.test(matchString)) {
1121
- return {
1122
- lang: 'JavaScript',
1123
- theme: '',
1124
- lineNumber: true,
1125
- slots: [createCodeSlot()]
1126
- };
1127
- }
1128
- if (/^ts$/i.test(matchString)) {
1012
+ }
1013
+ return false;
1014
+ },
1015
+ createState(content) {
1016
+ const matchString = content.replace(/`/g, '').replace(/\+/, '\\+');
1017
+ for (const item of languageList) {
1018
+ const reg = new RegExp(`^${matchString}$`, 'i');
1019
+ if (reg.test(item.label || item.value)) {
1129
1020
  return {
1130
- lang: 'TypeScript',
1021
+ lang: item.value,
1131
1022
  theme: '',
1132
1023
  lineNumber: true,
1133
1024
  slots: [createCodeSlot()]
1134
1025
  };
1135
1026
  }
1027
+ }
1028
+ if (/^js$/i.test(matchString)) {
1029
+ return {
1030
+ lang: 'JavaScript',
1031
+ theme: '',
1032
+ lineNumber: true,
1033
+ slots: [createCodeSlot()]
1034
+ };
1035
+ }
1036
+ if (/^ts$/i.test(matchString)) {
1136
1037
  return {
1137
- lang: '',
1038
+ lang: 'TypeScript',
1138
1039
  theme: '',
1139
1040
  lineNumber: true,
1140
1041
  slots: [createCodeSlot()]
1141
1042
  };
1142
1043
  }
1044
+ return {
1045
+ lang: '',
1046
+ theme: '',
1047
+ lineNumber: true,
1048
+ slots: [createCodeSlot()]
1049
+ };
1143
1050
  }
1144
- });
1051
+ };
1145
1052
  function SourceCodeView(props) {
1146
1053
  const adapter = inject(DomAdapter);
1147
1054
  const isFocus = createSignal(false);
@@ -1229,11 +1136,11 @@ function SourceCodeView(props) {
1229
1136
  return textNode;
1230
1137
  });
1231
1138
  }
1232
- return (jsxs("pre", { ref: props.rootRef, class: {
1139
+ return (jsxs("div", { ref: props.rootRef, class: {
1233
1140
  'xnote-source-code': true,
1234
1141
  'xnote-source-code-line-number': state.lineNumber,
1235
1142
  [state.theme || 'github']: true
1236
- }, lang: state.lang, "data-auto-break": state.autoBreak, "data-theme": state.theme || null, "data-line-number": state.lineNumber, children: [!readonly() || !output() && jsxs(ComponentToolbar, { visible: isFocus(), children: [jsx(ToolbarItem, { children: jsx(Dropdown, { onCheck: changeLang, trigger: 'hover', menu: languageList.map(item => {
1143
+ }, "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()) && jsxs(ComponentToolbar, { visible: isFocus(), children: [jsx(ToolbarItem, { children: jsx(Dropdown, { onCheck: changeLang, trigger: 'hover', menu: languageList.map(item => {
1237
1144
  return {
1238
1145
  label: jsx(MenuItem, { checked: state.lang === item.value, children: item.label || 'Plain Text' }),
1239
1146
  value: item.value
@@ -1280,10 +1187,10 @@ function SourceCodeView(props) {
1280
1187
  children.push(br);
1281
1188
  }
1282
1189
  }
1283
- return createVNode('div', {
1190
+ return createVNode('pre', {
1284
1191
  class: 'xnote-source-code-line' + (item.emphasize ? ' xnote-source-code-line-emphasize' : '')
1285
1192
  }, [
1286
- createVNode('div', { class: 'xnote-source-code-line-content' }, children)
1193
+ createVNode('span', { class: 'xnote-source-code-line-content' }, children)
1287
1194
  ]);
1288
1195
  }, readonly());
1289
1196
  }) }), jsx("span", { class: "xnote-source-code-lang", children: lang })] })] }));
@@ -1291,12 +1198,13 @@ function SourceCodeView(props) {
1291
1198
  }
1292
1199
  const sourceCodeComponentLoader = {
1293
1200
  match(element) {
1294
- return element.tagName === 'PRE';
1201
+ return (element.tagName === 'DIV' && element.dataset.component === SourceCodeComponent.componentName) ||
1202
+ element.tagName === 'PRE';
1295
1203
  },
1296
1204
  read(el, textbus) {
1297
- const lines = el.querySelectorAll('.xnote-source-code-line');
1298
1205
  let slots = [];
1299
- if (lines.length) {
1206
+ if (el.tagName === 'DIV') {
1207
+ const lines = el.querySelectorAll('.xnote-source-code-line');
1300
1208
  slots = Array.from(lines).map(i => {
1301
1209
  const code = i.innerText.replace(/[\s\n]+$/, '');
1302
1210
  const item = createCodeSlot();
@@ -1317,9 +1225,10 @@ const sourceCodeComponentLoader = {
1317
1225
  });
1318
1226
  }
1319
1227
  return new SourceCodeComponent(textbus, {
1320
- lang: el.getAttribute('lang') || '',
1321
- theme: el.getAttribute('theme') || '',
1322
- lineNumber: !el.classList.contains('xnote-source-code-hide-line-number'),
1228
+ lang: el.dataset.lang || '',
1229
+ theme: el.dataset.theme || '',
1230
+ lineNumber: el.dataset.lineNumber === 'true',
1231
+ autoBreak: el.dataset.autoBreak === 'true',
1323
1232
  slots
1324
1233
  });
1325
1234
  },
@@ -1418,15 +1327,26 @@ function AttrTool(props) {
1418
1327
  textIndent: 0
1419
1328
  });
1420
1329
  function updateCheckStates() {
1421
- var _a, _b;
1422
- (_a = props.queryBefore) === null || _a === void 0 ? void 0 : _a.call(props);
1330
+ if (!props.slot && !selection.isSelected) {
1331
+ return;
1332
+ }
1423
1333
  setCheckStates(draft => {
1424
- const textAlignState = query.queryAttribute(textAlignAttr);
1425
- const textIndentState = query.queryAttribute(textIndentAttr);
1334
+ const range = props.slot ? {
1335
+ startSlot: props.slot,
1336
+ endSlot: props.slot,
1337
+ startOffset: 0,
1338
+ endOffset: props.slot.length
1339
+ } : {
1340
+ startSlot: selection.startSlot,
1341
+ startOffset: selection.startOffset,
1342
+ endSlot: selection.endSlot,
1343
+ endOffset: selection.endOffset
1344
+ };
1345
+ const textAlignState = query.queryAttributeByRange(textAlignAttr, range);
1346
+ const textIndentState = query.queryAttributeByRange(textIndentAttr, range);
1426
1347
  draft.textAlign = textAlignState.state === QueryStateType.Enabled ? textAlignState.value : 'left';
1427
1348
  draft.textIndent = textIndentState.state === QueryStateType.Enabled ? textIndentState.value : 0;
1428
1349
  });
1429
- (_b = props.queryAfter) === null || _b === void 0 ? void 0 : _b.call(props);
1430
1350
  }
1431
1351
  updateCheckStates();
1432
1352
  const subscription = refreshService.onRefresh.subscribe(() => {
@@ -1502,51 +1422,6 @@ function AttrTool(props) {
1502
1422
  });
1503
1423
  }
1504
1424
 
1505
- const headingAttr = new Attribute('Heading', {
1506
- render(node, formatValue) {
1507
- node.classes.add('xnote-' + formatValue);
1508
- }
1509
- });
1510
- const headingAttrLoader = {
1511
- match(element) {
1512
- return /H[1-6]/.test(element.tagName);
1513
- },
1514
- read(element) {
1515
- return {
1516
- attribute: headingAttr,
1517
- value: element.tagName.toLowerCase()
1518
- };
1519
- }
1520
- };
1521
- function registerHeadingShortcut(textbus) {
1522
- const keyboard = textbus.get(Keyboard);
1523
- const commander = textbus.get(Commander);
1524
- const selection = textbus.get(Selection);
1525
- keyboard.addShortcut({
1526
- keymap: {
1527
- key: '123456'.split(''),
1528
- ctrlKey: true
1529
- },
1530
- action(key) {
1531
- commander.applyAttribute(headingAttr, 'h' + key);
1532
- }
1533
- });
1534
- keyboard.addZenCodingInterceptor({
1535
- match(content) {
1536
- return /^#{1,6}$/.test(content);
1537
- },
1538
- try(key) {
1539
- return key === ' ';
1540
- },
1541
- action(content) {
1542
- const commonAncestorSlot = selection.commonAncestorSlot;
1543
- commonAncestorSlot.cut();
1544
- commander.applyAttribute(headingAttr, 'h' + content.length);
1545
- return true;
1546
- }
1547
- });
1548
- }
1549
-
1550
1425
  function useBlockContent(slot) {
1551
1426
  const textbus = useContext();
1552
1427
  const selection = textbus.get(Selection);
@@ -1602,8 +1477,6 @@ class TableComponent extends Component {
1602
1477
  rowspan: 1,
1603
1478
  colspan: 1,
1604
1479
  slot: new Slot([
1605
- ContentType.Text,
1606
- ContentType.InlineComponent,
1607
1480
  ContentType.BlockComponent
1608
1481
  ])
1609
1482
  };
@@ -1612,26 +1485,12 @@ class TableComponent extends Component {
1612
1485
  })
1613
1486
  }) {
1614
1487
  super(textbus, state);
1615
- Object.defineProperty(this, "selection", {
1616
- enumerable: true,
1617
- configurable: true,
1618
- writable: true,
1619
- value: this.textbus.get(Selection)
1620
- });
1621
- Object.defineProperty(this, "focus", {
1622
- enumerable: true,
1623
- configurable: true,
1624
- writable: true,
1625
- value: new Subject()
1626
- });
1627
- Object.defineProperty(this, "tableSelection", {
1628
- enumerable: true,
1629
- configurable: true,
1630
- writable: true,
1631
- value: createSignal(null)
1632
- });
1488
+ this.selection = this.textbus.get(Selection);
1489
+ this.focus = new Subject();
1490
+ this.tableSelection = createSignal(null);
1633
1491
  }
1634
1492
  setup() {
1493
+ const selection = useContext(Selection);
1635
1494
  onFocusIn(() => {
1636
1495
  this.focus.next(true);
1637
1496
  });
@@ -1641,12 +1500,42 @@ class TableComponent extends Component {
1641
1500
  useBlockContent((slot) => {
1642
1501
  return slot.parent === this;
1643
1502
  });
1644
- onGetRanges(ev => {
1645
- const selectPosition = this.tableSelection();
1503
+ const sub = selection.onChange.subscribe(() => {
1504
+ if (selection.commonAncestorComponent !== this || selection.isCollapsed) {
1505
+ this.tableSelection.set(null);
1506
+ }
1507
+ });
1508
+ onDestroy(() => {
1509
+ sub.unsubscribe();
1510
+ });
1511
+ const findPosition = (slot) => {
1512
+ let cell = slot;
1513
+ while ((cell === null || cell === void 0 ? void 0 : cell.parent) && cell.parent !== this) {
1514
+ cell = cell.parentSlot;
1515
+ }
1516
+ if (cell) {
1517
+ const rows = this.state.rows;
1518
+ for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
1519
+ const row = rows[rowIndex].cells;
1520
+ for (let colIndex = 0; colIndex < row.length; colIndex++) {
1521
+ const item = row[colIndex].slot;
1522
+ if (item === cell) {
1523
+ return {
1524
+ rowIndex,
1525
+ colIndex
1526
+ };
1527
+ }
1528
+ }
1529
+ }
1530
+ }
1531
+ return null;
1532
+ };
1533
+ const select = (ev, selectPosition) => {
1534
+ this.tableSelection.set(selectPosition);
1646
1535
  if (selectPosition) {
1647
1536
  const cells = [];
1648
- this.state.rows.slice(selectPosition.startRow, selectPosition.endRow + 1).forEach(row => {
1649
- cells.push(...row.cells.slice(selectPosition.startColumn, selectPosition.endColumn + 1).map(i => i.slot));
1537
+ this.state.rows.slice(selectPosition.startRow, selectPosition.endRow).forEach(row => {
1538
+ cells.push(...row.cells.slice(selectPosition.startColumn, selectPosition.endColumn).map(i => i.slot));
1650
1539
  });
1651
1540
  ev.useRanges(cells.map(i => {
1652
1541
  return {
@@ -1657,6 +1546,37 @@ class TableComponent extends Component {
1657
1546
  }));
1658
1547
  ev.preventDefault();
1659
1548
  }
1549
+ };
1550
+ onGetRanges(ev => {
1551
+ var _a;
1552
+ const startPosition = findPosition(selection.startSlot);
1553
+ const endPosition = findPosition(selection.endSlot);
1554
+ if (startPosition && endPosition) {
1555
+ if (startPosition.rowIndex === endPosition.rowIndex && startPosition.colIndex === endPosition.colIndex) {
1556
+ if (selection.startSlot === selection.endSlot && selection.startOffset === 0 && selection.endOffset === ((_a = selection.startSlot) === null || _a === void 0 ? void 0 : _a.length)) {
1557
+ select(ev, {
1558
+ startColumn: startPosition.colIndex,
1559
+ startRow: startPosition.rowIndex,
1560
+ endColumn: endPosition.colIndex + 1,
1561
+ endRow: endPosition.rowIndex + 1
1562
+ });
1563
+ return;
1564
+ }
1565
+ select(ev, null);
1566
+ return;
1567
+ }
1568
+ const [startColumn, endColumn] = [startPosition.colIndex, endPosition.colIndex].sort((a, b) => a - b);
1569
+ const [startRow, endRow] = [startPosition.rowIndex, endPosition.rowIndex].sort((a, b) => a - b);
1570
+ select(ev, {
1571
+ startColumn,
1572
+ startRow,
1573
+ endColumn: endColumn + 1,
1574
+ endRow: endRow + 1
1575
+ });
1576
+ }
1577
+ else {
1578
+ select(ev, null);
1579
+ }
1660
1580
  });
1661
1581
  }
1662
1582
  afterContentCheck() {
@@ -1700,8 +1620,6 @@ class TableComponent extends Component {
1700
1620
  this.state.rows.forEach(row => {
1701
1621
  const slot = new Slot([
1702
1622
  ContentType.BlockComponent,
1703
- ContentType.InlineComponent,
1704
- ContentType.Text
1705
1623
  ]);
1706
1624
  slot.insert(new ParagraphComponent(this.textbus, {
1707
1625
  slot: new Slot([
@@ -1729,8 +1647,6 @@ class TableComponent extends Component {
1729
1647
  cells: this.state.layoutWidth.map(() => {
1730
1648
  const slot = new Slot([
1731
1649
  ContentType.BlockComponent,
1732
- ContentType.InlineComponent,
1733
- ContentType.Text
1734
1650
  ]);
1735
1651
  slot.insert(new ParagraphComponent(this.textbus, {
1736
1652
  slot: new Slot([
@@ -1754,21 +1670,8 @@ class TableComponent extends Component {
1754
1670
  });
1755
1671
  }
1756
1672
  }
1757
- Object.defineProperty(TableComponent, "componentName", {
1758
- enumerable: true,
1759
- configurable: true,
1760
- writable: true,
1761
- value: 'TableComponent'
1762
- });
1763
- Object.defineProperty(TableComponent, "type", {
1764
- enumerable: true,
1765
- configurable: true,
1766
- writable: true,
1767
- value: ContentType.BlockComponent
1768
- });
1769
-
1770
- 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}";
1771
- styleInject(css_248z$j);
1673
+ TableComponent.componentName = 'TableComponent';
1674
+ TableComponent.type = ContentType.BlockComponent;
1772
1675
 
1773
1676
  const strikeThroughFormatter = new Formatter('strike', {
1774
1677
  columned: true,
@@ -1805,7 +1708,7 @@ function registerStrikeThroughShortcut(textbus) {
1805
1708
  }
1806
1709
  const strikeThroughFormatLoader = {
1807
1710
  match(element) {
1808
- return /strike|del|s/i.test(element.tagName) || /line-through/.test(element.style.textDecoration);
1711
+ return /^(strike|del|s)$/i.test(element.tagName) || /line-through/.test(element.style.textDecoration);
1809
1712
  },
1810
1713
  read() {
1811
1714
  return {
@@ -1829,6 +1732,7 @@ class TodolistComponent extends Component {
1829
1732
  const selection = useContext(Selection);
1830
1733
  onBreak(ev => {
1831
1734
  const slot = ev.target.cut(ev.data.index);
1735
+ slot.removeAttribute(headingAttr);
1832
1736
  if (ev.target.isEmpty && slot.isEmpty) {
1833
1737
  const beforeIndex = this.parent.indexOf(this);
1834
1738
  const beforeComponent = this.parent.getContentAtIndex(beforeIndex - 1);
@@ -1873,37 +1777,28 @@ class TodolistComponent extends Component {
1873
1777
  });
1874
1778
  }
1875
1779
  }
1876
- Object.defineProperty(TodolistComponent, "type", {
1877
- enumerable: true,
1878
- configurable: true,
1879
- writable: true,
1880
- value: ContentType.BlockComponent
1881
- });
1882
- Object.defineProperty(TodolistComponent, "componentName", {
1883
- enumerable: true,
1884
- configurable: true,
1885
- writable: true,
1886
- value: 'TodoListComponent'
1887
- });
1888
- Object.defineProperty(TodolistComponent, "zenCoding", {
1889
- enumerable: true,
1890
- configurable: true,
1891
- writable: true,
1892
- value: {
1893
- match: /^\[(x|\s)?\]$/,
1894
- key: ' ',
1895
- createState(content) {
1896
- const isChecked = content.charAt(1) === 'x';
1897
- return {
1898
- checked: isChecked,
1899
- slot: new Slot([
1900
- ContentType.InlineComponent,
1901
- ContentType.Text
1902
- ])
1903
- };
1780
+ TodolistComponent.type = ContentType.BlockComponent;
1781
+ TodolistComponent.componentName = 'TodoListComponent';
1782
+ TodolistComponent.zenCoding = {
1783
+ match(content, textbus) {
1784
+ const selection = textbus.get(Selection);
1785
+ if (selection.commonAncestorComponent instanceof ParagraphComponent) {
1786
+ return /^\[(x|\s)?\]$/.test(content);
1904
1787
  }
1788
+ return false;
1789
+ },
1790
+ key: ' ',
1791
+ createState(content) {
1792
+ const isChecked = content.charAt(1) === 'x';
1793
+ return {
1794
+ checked: isChecked,
1795
+ slot: new Slot([
1796
+ ContentType.InlineComponent,
1797
+ ContentType.Text
1798
+ ])
1799
+ };
1905
1800
  }
1906
- });
1801
+ };
1907
1802
  function TodolistView(props) {
1908
1803
  const adapter = inject(DomAdapter);
1909
1804
  const component = props.component;
@@ -1938,7 +1833,7 @@ function TodolistView(props) {
1938
1833
  return createVNode('div', {
1939
1834
  class: 'xnote-todolist-content'
1940
1835
  }, children);
1941
- }, readonly())] }));
1836
+ }, readonly() || output())] }));
1942
1837
  };
1943
1838
  }
1944
1839
  const todolistComponentLoader = {
@@ -1957,9 +1852,6 @@ const todolistComponentLoader = {
1957
1852
  }
1958
1853
  };
1959
1854
 
1960
- 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}";
1961
- styleInject(css_248z$i);
1962
-
1963
1855
  class BlockquoteComponent extends Component {
1964
1856
  static fromJSON(textbus, json) {
1965
1857
  const slot = textbus.get(Registry).createSlot(json.slot);
@@ -1969,8 +1861,6 @@ class BlockquoteComponent extends Component {
1969
1861
  }
1970
1862
  constructor(textbus, state = {
1971
1863
  slot: new Slot([
1972
- ContentType.Text,
1973
- ContentType.InlineComponent,
1974
1864
  ContentType.BlockComponent
1975
1865
  ])
1976
1866
  }) {
@@ -1980,44 +1870,34 @@ class BlockquoteComponent extends Component {
1980
1870
  useBlockContent(this.state.slot);
1981
1871
  }
1982
1872
  }
1983
- Object.defineProperty(BlockquoteComponent, "type", {
1984
- enumerable: true,
1985
- configurable: true,
1986
- writable: true,
1987
- value: ContentType.BlockComponent
1988
- });
1989
- Object.defineProperty(BlockquoteComponent, "componentName", {
1990
- enumerable: true,
1991
- configurable: true,
1992
- writable: true,
1993
- value: 'BlockquoteComponent'
1994
- });
1995
- Object.defineProperty(BlockquoteComponent, "zenCoding", {
1996
- enumerable: true,
1997
- configurable: true,
1998
- writable: true,
1999
- value: {
2000
- key: ' ',
2001
- match: /^>$/,
2002
- createState() {
2003
- return {
2004
- slot: new Slot([
2005
- ContentType.Text,
2006
- ContentType.InlineComponent,
2007
- ContentType.BlockComponent
2008
- ])
2009
- };
1873
+ BlockquoteComponent.type = ContentType.BlockComponent;
1874
+ BlockquoteComponent.componentName = 'BlockquoteComponent';
1875
+ BlockquoteComponent.zenCoding = {
1876
+ key: ' ',
1877
+ match(content, textbus) {
1878
+ const selection = textbus.get(Selection);
1879
+ if (selection.commonAncestorComponent instanceof ParagraphComponent) {
1880
+ return /^>$/.test(content);
2010
1881
  }
1882
+ return false;
1883
+ },
1884
+ createState() {
1885
+ return {
1886
+ slot: new Slot([
1887
+ ContentType.BlockComponent
1888
+ ])
1889
+ };
2011
1890
  }
2012
- });
1891
+ };
2013
1892
  function BlockquoteView(props) {
2014
1893
  const adapter = inject(DomAdapter);
2015
1894
  const readonly = useReadonly();
1895
+ const output = useOutput();
2016
1896
  return () => {
2017
1897
  const slot = props.component.state.slot;
2018
1898
  return (jsx("blockquote", { class: "xnote-blockquote", ref: props.rootRef, "data-component": props.component.name, children: adapter.slotRender(slot, children => {
2019
1899
  return createVNode('div', null, children);
2020
- }, readonly()) }));
1900
+ }, readonly() || output()) }));
2021
1901
  };
2022
1902
  }
2023
1903
  const blockquoteComponentLoader = {
@@ -2026,14 +1906,12 @@ const blockquoteComponentLoader = {
2026
1906
  },
2027
1907
  read(element, textbus, slotParser) {
2028
1908
  const delta = slotParser(new Slot([
2029
- ContentType.Text,
2030
1909
  ContentType.BlockComponent,
2031
- ContentType.InlineComponent
1910
+ ContentType.InlineComponent,
1911
+ ContentType.Text
2032
1912
  ]), element).toDelta();
2033
1913
  const slot = new Slot([
2034
1914
  ContentType.BlockComponent,
2035
- ContentType.InlineComponent,
2036
- ContentType.Text
2037
1915
  ]);
2038
1916
  deltaToBlock(delta, textbus).forEach(i => {
2039
1917
  slot.insert(i);
@@ -2044,9 +1922,6 @@ const blockquoteComponentLoader = {
2044
1922
  },
2045
1923
  };
2046
1924
 
2047
- 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}";
2048
- styleInject(css_248z$h);
2049
-
2050
1925
  class ListComponent extends Component {
2051
1926
  static fromJSON(textbus, json) {
2052
1927
  return new ListComponent(textbus, {
@@ -2082,6 +1957,7 @@ class ListComponent extends Component {
2082
1957
  });
2083
1958
  onBreak(ev => {
2084
1959
  const slot = ev.target.cut(ev.data.index);
1960
+ slot.removeAttribute(headingAttr);
2085
1961
  if (ev.target.isEmpty && slot.isEmpty) {
2086
1962
  const beforeIndex = this.parent.indexOf(this);
2087
1963
  const beforeComponent = this.parent.getContentAtIndex(beforeIndex - 1);
@@ -2127,39 +2003,49 @@ class ListComponent extends Component {
2127
2003
  selection.setPosition(slot, 0);
2128
2004
  }
2129
2005
  });
2006
+ useDynamicShortcut({
2007
+ keymap: {
2008
+ key: 'Tab'
2009
+ },
2010
+ action: () => {
2011
+ updateAfterList(this);
2012
+ return false;
2013
+ }
2014
+ });
2015
+ useDynamicShortcut({
2016
+ keymap: {
2017
+ key: 'Tab',
2018
+ shiftKey: true
2019
+ },
2020
+ action: () => {
2021
+ Promise.resolve().then(() => updateAfterList(this));
2022
+ return false;
2023
+ }
2024
+ });
2130
2025
  }
2131
2026
  }
2132
- Object.defineProperty(ListComponent, "componentName", {
2133
- enumerable: true,
2134
- configurable: true,
2135
- writable: true,
2136
- value: 'ListComponent'
2137
- });
2138
- Object.defineProperty(ListComponent, "type", {
2139
- enumerable: true,
2140
- configurable: true,
2141
- writable: true,
2142
- value: ContentType.BlockComponent
2143
- });
2144
- Object.defineProperty(ListComponent, "zenCoding", {
2145
- enumerable: true,
2146
- configurable: true,
2147
- writable: true,
2148
- value: {
2149
- key: ' ',
2150
- match: /^([1-9]\.|[+*])$/,
2151
- createState(content) {
2152
- return {
2153
- type: /[-+*]/.test(content) ? 'UnorderedList' : 'OrderedList',
2154
- reorder: true,
2155
- slot: new Slot([
2156
- ContentType.InlineComponent,
2157
- ContentType.Text
2158
- ])
2159
- };
2027
+ ListComponent.componentName = 'ListComponent';
2028
+ ListComponent.type = ContentType.BlockComponent;
2029
+ ListComponent.zenCoding = {
2030
+ key: ' ',
2031
+ match(content, textbus) {
2032
+ const selection = textbus.get(Selection);
2033
+ if (selection.commonAncestorComponent instanceof ParagraphComponent) {
2034
+ return /^([1-9]\.|[+*])$/.test(content);
2160
2035
  }
2036
+ return false;
2037
+ },
2038
+ createState(content) {
2039
+ return {
2040
+ type: /[-+*]/.test(content) ? 'UnorderedList' : 'OrderedList',
2041
+ reorder: true,
2042
+ slot: new Slot([
2043
+ ContentType.InlineComponent,
2044
+ ContentType.Text
2045
+ ])
2046
+ };
2161
2047
  }
2162
- });
2048
+ };
2163
2049
  const step = 26;
2164
2050
  const chars = Array.from({ length: step }).map((_, index) => String.fromCharCode(96 + index + 1));
2165
2051
  function numberToLetter(num) {
@@ -2249,14 +2135,14 @@ function ListComponentView(props) {
2249
2135
  }, children: jsxs("li", { style: {
2250
2136
  justifyContent: align[component.state.slot.getAttribute(textAlignAttr)],
2251
2137
  textAlign: component.state.slot.getAttribute(textAlignAttr) === 'justify' ? 'justify' : void 0
2252
- }, children: [jsx("div", { class: "xnote-list-type", children: component.state.type === 'UnorderedList' || readonly() || output() ?
2138
+ }, children: [jsx("div", { class: "xnote-list-type", children: (component.state.type === 'UnorderedList' || readonly() || output()) ?
2253
2139
  jsx("span", { class: "xnote-order-btn", children: icon })
2254
2140
  :
2255
2141
  jsx(Dropdown, { menu: jsxs(Fragment, { children: [jsx(MenuItem, { onClick: () => reorder(false), children: "\u7EE7\u7EED\u7F16\u53F7" }), jsx(MenuItem, { onClick: () => reorder(true), children: "\u91CD\u65B0\u7F16\u53F7" })] }), children: jsx(Button, { style: { color: 'inherit' }, children: icon }) }) }), adapter.slotRender(component.state.slot, children => {
2256
2142
  return createVNode('div', {
2257
2143
  class: 'xnote-list-content'
2258
2144
  }, children);
2259
- }, readonly())] }) }));
2145
+ }, readonly() || output())] }) }));
2260
2146
  };
2261
2147
  }
2262
2148
  const listComponentLoader = {
@@ -2315,45 +2201,59 @@ function useActiveBlock() {
2315
2201
  sourceCode: false,
2316
2202
  highlightBox: false
2317
2203
  });
2318
- function updateCheckStates() {
2204
+ function updateCheckStates(range) {
2319
2205
  setCheckStates(draft => {
2320
- const heading = query.queryAttribute(headingAttr);
2321
- draft.paragraph = query.queryComponent(ParagraphComponent).state === QueryStateType.Enabled;
2206
+ const heading = query.queryAttributeByRange(headingAttr, range);
2207
+ draft.paragraph = query.queryComponentByRange(ParagraphComponent, range).state === QueryStateType.Enabled;
2322
2208
  draft.h1 = draft.h2 = draft.h3 = draft.h4 = draft.h5 = draft.h6 = false;
2323
2209
  if (heading.state === QueryStateType.Enabled) {
2324
2210
  draft[heading.value] = true;
2325
2211
  draft.paragraph = false;
2326
2212
  }
2327
- const queryList = query.queryComponent(ListComponent);
2213
+ const queryList = query.queryComponentByRange(ListComponent, range);
2328
2214
  draft.unorderedList = queryList.state === QueryStateType.Enabled && queryList.value.state.type === 'UnorderedList';
2329
2215
  draft.orderedList = queryList.state === QueryStateType.Enabled && queryList.value.state.type === 'OrderedList';
2330
- draft.table = query.queryComponent(TableComponent).state === QueryStateType.Enabled;
2331
- draft.todolist = query.queryComponent(TodolistComponent).state === QueryStateType.Enabled;
2332
- draft.blockquote = query.queryComponent(BlockquoteComponent).state === QueryStateType.Enabled;
2333
- draft.sourceCode = query.queryComponent(SourceCodeComponent).state === QueryStateType.Enabled;
2216
+ draft.table = query.queryComponentByRange(TableComponent, range).state === QueryStateType.Enabled;
2217
+ draft.todolist = query.queryComponentByRange(TodolistComponent, range).state === QueryStateType.Enabled;
2218
+ draft.blockquote = query.queryComponentByRange(BlockquoteComponent, range).state === QueryStateType.Enabled;
2219
+ draft.sourceCode = query.queryComponentByRange(SourceCodeComponent, range).state === QueryStateType.Enabled;
2334
2220
  });
2335
2221
  }
2336
- updateCheckStates();
2337
2222
  const subscription = refreshService.onRefresh.subscribe(() => {
2338
- updateCheckStates();
2223
+ if (!selection.isSelected) {
2224
+ return;
2225
+ }
2226
+ updateCheckStates({
2227
+ startOffset: selection.startOffset,
2228
+ startSlot: selection.startSlot,
2229
+ endSlot: selection.endSlot,
2230
+ endOffset: selection.endOffset
2231
+ });
2339
2232
  });
2340
2233
  onUnmounted(() => {
2341
2234
  subscription.unsubscribe();
2342
2235
  });
2343
2236
  return function (slot = null) {
2344
2237
  if (slot) {
2345
- const snapshot = selection.createSnapshot();
2346
- selection.setBaseAndExtent(slot, 0, slot, slot.length);
2347
- updateCheckStates();
2348
- snapshot.restore();
2238
+ updateCheckStates({
2239
+ startOffset: 0,
2240
+ endOffset: slot.length,
2241
+ startSlot: slot,
2242
+ endSlot: slot
2243
+ });
2244
+ }
2245
+ else if (selection.isSelected) {
2246
+ updateCheckStates({
2247
+ startOffset: selection.startOffset,
2248
+ startSlot: selection.startSlot,
2249
+ endSlot: selection.endSlot,
2250
+ endOffset: selection.endOffset
2251
+ });
2349
2252
  }
2350
2253
  return checkStates();
2351
2254
  };
2352
2255
  }
2353
2256
 
2354
- 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}";
2355
- styleInject(css_248z$g);
2356
-
2357
2257
  class HighlightBoxComponent extends Component {
2358
2258
  static fromJSON(textbus, json) {
2359
2259
  return new HighlightBoxComponent(textbus, {
@@ -2365,8 +2265,6 @@ class HighlightBoxComponent extends Component {
2365
2265
  type: '',
2366
2266
  slot: new Slot([
2367
2267
  ContentType.BlockComponent,
2368
- ContentType.InlineComponent,
2369
- ContentType.Text
2370
2268
  ])
2371
2269
  }) {
2372
2270
  super(textbus, state);
@@ -2375,24 +2273,9 @@ class HighlightBoxComponent extends Component {
2375
2273
  useBlockContent(this.state.slot);
2376
2274
  }
2377
2275
  }
2378
- Object.defineProperty(HighlightBoxComponent, "defaultTypes", {
2379
- enumerable: true,
2380
- configurable: true,
2381
- writable: true,
2382
- value: ['❤️', '💡', '📌', '✅', '❎', '👍', '🎉', '🚫', '❗']
2383
- });
2384
- Object.defineProperty(HighlightBoxComponent, "componentName", {
2385
- enumerable: true,
2386
- configurable: true,
2387
- writable: true,
2388
- value: 'HighlightBoxComponent'
2389
- });
2390
- Object.defineProperty(HighlightBoxComponent, "type", {
2391
- enumerable: true,
2392
- configurable: true,
2393
- writable: true,
2394
- value: ContentType.BlockComponent
2395
- });
2276
+ HighlightBoxComponent.defaultTypes = ['❤️', '💡', '📌', '✅', '❎', '👍', '🎉', '🚫', '❗'];
2277
+ HighlightBoxComponent.componentName = 'HighlightBoxComponent';
2278
+ HighlightBoxComponent.type = ContentType.BlockComponent;
2396
2279
  function HighlightBoxView(props) {
2397
2280
  const adapter = inject(DomAdapter);
2398
2281
  const readonly = useReadonly();
@@ -2414,7 +2297,7 @@ function HighlightBoxView(props) {
2414
2297
  return createVNode('div', {
2415
2298
  class: 'xnote-highlight-box-content'
2416
2299
  }, children);
2417
- }, readonly())] }));
2300
+ }, readonly() || output())] }));
2418
2301
  }
2419
2302
  return (jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsx("div", { class: "xnote-highlight-box-left", children: jsx(Dropdown, { trigger: "click", ref: dropdownRef, width: "260px", menu: jsxs("div", { class: "xnote-highlight-box-icons", children: [HighlightBoxComponent.defaultTypes.map(icon => {
2420
2303
  return (jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
@@ -2425,7 +2308,7 @@ function HighlightBoxView(props) {
2425
2308
  return createVNode('div', {
2426
2309
  class: 'xnote-highlight-box-content'
2427
2310
  }, children);
2428
- }, readonly())] }));
2311
+ }, readonly() || output())] }));
2429
2312
  };
2430
2313
  }
2431
2314
  const highlightBoxComponentLoader = {
@@ -2440,8 +2323,6 @@ const highlightBoxComponentLoader = {
2440
2323
  ]), element.querySelector('.xnote-highlight-box-content')).toDelta();
2441
2324
  const slot = new Slot([
2442
2325
  ContentType.BlockComponent,
2443
- ContentType.InlineComponent,
2444
- ContentType.Text
2445
2326
  ]);
2446
2327
  deltaToBlock(delta, textbus).forEach(i => {
2447
2328
  slot.insert(i);
@@ -2473,17 +2354,16 @@ function useBlockTransform() {
2473
2354
  commander.unApplyAttribute(headingAttr);
2474
2355
  commander.transform({
2475
2356
  targetType: ParagraphComponent.type,
2476
- multipleSlot: false,
2477
2357
  slotFactory() {
2478
2358
  return new Slot([
2479
2359
  ContentType.InlineComponent,
2480
2360
  ContentType.Text
2481
2361
  ]);
2482
2362
  },
2483
- stateFactory(slot) {
2484
- return new ParagraphComponent(textbus, {
2363
+ stateFactory(slots) {
2364
+ return slots.map(slot => new ParagraphComponent(textbus, {
2485
2365
  slot
2486
- });
2366
+ }));
2487
2367
  }
2488
2368
  });
2489
2369
  break;
@@ -2502,17 +2382,18 @@ function useBlockTransform() {
2502
2382
  commander.unApplyAttribute(headingAttr);
2503
2383
  commander.transform({
2504
2384
  targetType: TodolistComponent.type,
2505
- multipleSlot: false,
2506
2385
  slotFactory() {
2507
2386
  return new Slot([
2508
2387
  ContentType.InlineComponent,
2509
2388
  ContentType.Text
2510
2389
  ]);
2511
2390
  },
2512
- stateFactory(slot) {
2513
- return new TodolistComponent(textbus, {
2514
- checked: false,
2515
- slot
2391
+ stateFactory(slots) {
2392
+ return slots.map(slot => {
2393
+ return new TodolistComponent(textbus, {
2394
+ checked: false,
2395
+ slot
2396
+ });
2516
2397
  });
2517
2398
  }
2518
2399
  });
@@ -2522,18 +2403,19 @@ function useBlockTransform() {
2522
2403
  {
2523
2404
  commander.transform({
2524
2405
  targetType: ListComponent.type,
2525
- multipleSlot: false,
2526
2406
  slotFactory() {
2527
2407
  return new Slot([
2528
2408
  ContentType.InlineComponent,
2529
2409
  ContentType.Text
2530
2410
  ]);
2531
2411
  },
2532
- stateFactory(slot) {
2533
- return new ListComponent(textbus, {
2534
- type: value === 'ol' ? 'OrderedList' : 'UnorderedList',
2535
- reorder: true,
2536
- slot
2412
+ stateFactory(slots) {
2413
+ return slots.map((slot, index) => {
2414
+ return new ListComponent(textbus, {
2415
+ type: value === 'ol' ? 'OrderedList' : 'UnorderedList',
2416
+ reorder: index === 0,
2417
+ slot
2418
+ });
2537
2419
  });
2538
2420
  }
2539
2421
  });
@@ -2581,16 +2463,17 @@ function useBlockTransform() {
2581
2463
  if (state.state === QueryStateType.Enabled) {
2582
2464
  commander.transform({
2583
2465
  targetType: ParagraphComponent.type,
2584
- multipleSlot: false,
2585
2466
  slotFactory() {
2586
2467
  return new Slot([
2587
2468
  ContentType.InlineComponent,
2588
2469
  ContentType.Text
2589
2470
  ]);
2590
2471
  },
2591
- stateFactory(slot) {
2592
- return new ParagraphComponent(textbus, {
2593
- slot
2472
+ stateFactory(slots) {
2473
+ return slots.map(slot => {
2474
+ return new ParagraphComponent(textbus, {
2475
+ slot
2476
+ });
2594
2477
  });
2595
2478
  }
2596
2479
  });
@@ -2598,24 +2481,23 @@ function useBlockTransform() {
2598
2481
  else {
2599
2482
  commander.transform({
2600
2483
  targetType: SourceCodeComponent.type,
2601
- multipleSlot: true,
2602
2484
  slotFactory() {
2603
2485
  return new Slot([
2604
2486
  ContentType.Text
2605
2487
  ]);
2606
2488
  },
2607
2489
  stateFactory(slots) {
2608
- return new SourceCodeComponent(textbus, {
2609
- lang: '',
2610
- lineNumber: true,
2611
- autoBreak: true,
2612
- slots: slots.map(slot => {
2613
- return {
2614
- slot,
2615
- emphasize: false
2616
- };
2617
- })
2618
- });
2490
+ return [new SourceCodeComponent(textbus, {
2491
+ lang: '',
2492
+ lineNumber: true,
2493
+ autoBreak: true,
2494
+ slots: slots.map(slot => {
2495
+ return {
2496
+ slot,
2497
+ emphasize: false
2498
+ };
2499
+ })
2500
+ })];
2619
2501
  }
2620
2502
  });
2621
2503
  }
@@ -3095,14 +2977,13 @@ function CodeTool() {
3095
2977
  };
3096
2978
  }
3097
2979
 
3098
- 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}";
3099
2980
  var scopedId$a = "vf-1fbbdf";
3100
- styleInject(css_248z$f);
3101
2981
 
3102
2982
  function ColorTool(props) {
3103
2983
  const query = inject(Query);
3104
2984
  const refreshService = inject(RefreshService);
3105
2985
  const commander = inject(Commander);
2986
+ const selection = inject(Selection);
3106
2987
  const textColor = createSignal('');
3107
2988
  const backgroundColor = createSignal('');
3108
2989
  const [viewModel] = useProduce({
@@ -3110,13 +2991,24 @@ function ColorTool(props) {
3110
2991
  disabled: false,
3111
2992
  });
3112
2993
  function updateCheckState() {
3113
- var _a, _b;
3114
- (_a = props.queryBefore) === null || _a === void 0 ? void 0 : _a.call(props);
3115
- const textState = query.queryFormat(colorFormatter);
3116
- const backgroundState = query.queryFormat(backgroundColorFormatter);
2994
+ if (!props.slot && !selection.isSelected) {
2995
+ return;
2996
+ }
2997
+ const range = props.slot ? {
2998
+ startSlot: props.slot,
2999
+ endSlot: props.slot,
3000
+ startOffset: 0,
3001
+ endOffset: props.slot.length
3002
+ } : {
3003
+ startSlot: selection.startSlot,
3004
+ startOffset: selection.startOffset,
3005
+ endSlot: selection.endSlot,
3006
+ endOffset: selection.endOffset
3007
+ };
3008
+ const textState = query.queryFormatByRange(colorFormatter, range);
3009
+ const backgroundState = query.queryFormatByRange(backgroundColorFormatter, range);
3117
3010
  textColor.set(textState.state === QueryStateType.Enabled ? textState.value : '');
3118
3011
  backgroundColor.set(backgroundState.state === QueryStateType.Enabled ? backgroundState.value : '');
3119
- (_b = props.queryAfter) === null || _b === void 0 ? void 0 : _b.call(props);
3120
3012
  }
3121
3013
  const sub = refreshService.onRefresh.subscribe(() => {
3122
3014
  updateCheckState();
@@ -3132,6 +3024,7 @@ function ColorTool(props) {
3132
3024
  '#ffdf14',
3133
3025
  '#5eec75',
3134
3026
  '#5dfaff',
3027
+ '#1296db',
3135
3028
  '#617fff',
3136
3029
  '#c459ff',
3137
3030
  ];
@@ -3353,9 +3246,7 @@ function ItalicTool() {
3353
3246
  };
3354
3247
  }
3355
3248
 
3356
- 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}";
3357
3249
  var scopedId$9 = "vf-269a0b";
3358
- styleInject(css_248z$e);
3359
3250
 
3360
3251
  function LinkTool(props) {
3361
3252
  const selectionBridge = inject(SelectionBridge);
@@ -3455,20 +3346,107 @@ function UnderlineTool() {
3455
3346
  };
3456
3347
  }
3457
3348
 
3458
- 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}";
3459
3349
  var scopedId$8 = "vf-cf8e1c";
3460
- styleInject(css_248z$d);
3350
+
3351
+ class FileUploader {
3352
+ }
3353
+
3354
+ class ImageComponent extends Component {
3355
+ static fromJSON(textbus, json) {
3356
+ return new ImageComponent(textbus, Object.assign({}, json));
3357
+ }
3358
+ }
3359
+ ImageComponent.type = ContentType.InlineComponent;
3360
+ ImageComponent.componentName = 'ImageComponent';
3361
+ function ImageView(props) {
3362
+ const { name, state } = props.component;
3363
+ const imageRef = createRef();
3364
+ const readonly = useReadonly();
3365
+ const output = useOutput();
3366
+ return () => {
3367
+ if (readonly() || output()) {
3368
+ return (jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsx("img", { alt: "", src: state.src, style: {
3369
+ width: state.width,
3370
+ height: state.height
3371
+ } }) }));
3372
+ }
3373
+ return (jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsx(DragResize, { source: imageRef, component: props.component, children: jsx("img", { alt: "", ref: imageRef, src: state.src, style: {
3374
+ width: state.width,
3375
+ height: state.height
3376
+ } }) }) }));
3377
+ };
3378
+ }
3379
+ const imageComponentLoader = {
3380
+ match(element) {
3381
+ return element.tagName === 'IMG' || element.dataset.component === ImageComponent.componentName;
3382
+ },
3383
+ read(element, textbus) {
3384
+ var _a;
3385
+ return new ImageComponent(textbus, {
3386
+ src: element instanceof HTMLImageElement ? element.src : ((_a = element.querySelector('img')) === null || _a === void 0 ? void 0 : _a.src) || ''
3387
+ });
3388
+ }
3389
+ };
3390
+
3391
+ class VideoComponent extends Component {
3392
+ static fromJSON(textbus, json) {
3393
+ return new VideoComponent(textbus, Object.assign({}, json));
3394
+ }
3395
+ setup() {
3396
+ //
3397
+ }
3398
+ }
3399
+ VideoComponent.type = ContentType.InlineComponent;
3400
+ VideoComponent.componentName = 'VideoComponent';
3401
+ function VideoView(props) {
3402
+ const { name, state } = props.component;
3403
+ const videoRef = createRef();
3404
+ const readonly = useReadonly();
3405
+ const output = useOutput();
3406
+ return () => {
3407
+ if (readonly() || output()) {
3408
+ return (jsx("div", { class: "xnote-video", "data-component": name, children: jsx("video", { ref: videoRef, src: state.src, style: {
3409
+ width: state.width,
3410
+ height: state.height
3411
+ } }) }));
3412
+ }
3413
+ return (jsx("div", { ref: props.rootRef, class: "xnote-video", "data-component": name, children: jsx(DragResize, { source: videoRef, component: props.component, children: jsx("video", { ref: videoRef, src: state.src, style: {
3414
+ width: state.width,
3415
+ height: state.height
3416
+ } }) }) }));
3417
+ };
3418
+ }
3419
+ const videoComponentLoader = {
3420
+ match(element) {
3421
+ return element.tagName === 'IMG' || element.dataset.component === VideoComponent.componentName;
3422
+ },
3423
+ read(element, textbus) {
3424
+ var _a;
3425
+ return new VideoComponent(textbus, {
3426
+ src: element instanceof HTMLImageElement ? element.src : ((_a = element.querySelector('video')) === null || _a === void 0 ? void 0 : _a.src) || ''
3427
+ });
3428
+ }
3429
+ };
3461
3430
 
3462
3431
  function InsertTool(props) {
3463
3432
  const commander = inject(Commander);
3464
3433
  const selection = inject(Selection);
3465
3434
  const textbus = inject(Textbus);
3435
+ const fileUploader = inject(FileUploader, null);
3466
3436
  function insert(type) {
3467
3437
  var _a;
3468
3438
  const component = (_a = props.slot) === null || _a === void 0 ? void 0 : _a.parent;
3469
3439
  if (!component) {
3470
3440
  return;
3471
3441
  }
3442
+ function insertComponent(comp) {
3443
+ if (props.replace) {
3444
+ commander.replaceComponent(component, comp);
3445
+ }
3446
+ else {
3447
+ commander.insertAfter(comp, component);
3448
+ }
3449
+ }
3472
3450
  switch (type) {
3473
3451
  case 'h1':
3474
3452
  case 'h2':
@@ -3483,12 +3461,12 @@ function InsertTool(props) {
3483
3461
  ContentType.Text
3484
3462
  ]);
3485
3463
  if (/h[1-6]/.test(type)) {
3486
- slot.setAttribute(headingAttr, +type.substring(1));
3464
+ slot.setAttribute(headingAttr, type);
3487
3465
  }
3488
3466
  const p = new ParagraphComponent(textbus, {
3489
3467
  slot
3490
3468
  });
3491
- commander.insertAfter(p, component);
3469
+ insertComponent(p);
3492
3470
  selection.setPosition(slot, 0);
3493
3471
  }
3494
3472
  break;
@@ -3504,7 +3482,7 @@ function InsertTool(props) {
3504
3482
  reorder: true,
3505
3483
  type: type === 'ol' ? 'OrderedList' : 'UnorderedList'
3506
3484
  });
3507
- commander.insertAfter(list, component);
3485
+ insertComponent(list);
3508
3486
  selection.setPosition(slot, 0);
3509
3487
  }
3510
3488
  break;
@@ -3521,14 +3499,14 @@ function InsertTool(props) {
3521
3499
  emphasize: false
3522
3500
  }]
3523
3501
  });
3524
- commander.insertAfter(comp, component);
3502
+ insertComponent(comp);
3525
3503
  selection.setPosition(slot, 0);
3526
3504
  }
3527
3505
  break;
3528
3506
  case 'table':
3529
3507
  {
3530
3508
  const table = new TableComponent(textbus);
3531
- commander.insertAfter(table, component);
3509
+ insertComponent(table);
3532
3510
  selection.setPosition(table.state.rows[0].cells[0].slot, 0);
3533
3511
  }
3534
3512
  break;
@@ -3542,20 +3520,36 @@ function InsertTool(props) {
3542
3520
  slot,
3543
3521
  checked: false
3544
3522
  });
3545
- commander.insertAfter(comp, component);
3523
+ insertComponent(comp);
3546
3524
  selection.setPosition(slot, 0);
3547
3525
  }
3548
3526
  break;
3549
3527
  case 'image':
3528
+ if (fileUploader) {
3529
+ Promise.resolve(fileUploader.uploadFile('image')).then(url => {
3530
+ const img = new ImageComponent(textbus, {
3531
+ src: url
3532
+ });
3533
+ commander.insert(img);
3534
+ });
3535
+ }
3550
3536
  break;
3551
3537
  case 'video':
3538
+ if (fileUploader) {
3539
+ Promise.resolve(fileUploader.uploadFile('video')).then(url => {
3540
+ const img = new VideoComponent(textbus, {
3541
+ src: url
3542
+ });
3543
+ commander.insert(img);
3544
+ });
3545
+ }
3552
3546
  break;
3553
3547
  case 'highlightBox':
3554
3548
  {
3555
3549
  const p = new ParagraphComponent(textbus);
3556
3550
  const comp = new HighlightBoxComponent(textbus);
3557
3551
  comp.state.slot.insert(p);
3558
- commander.insertAfter(comp, component);
3552
+ insertComponent(comp);
3559
3553
  selection.setPosition(p.state.slot, 0);
3560
3554
  }
3561
3555
  break;
@@ -3566,9 +3560,7 @@ function InsertTool(props) {
3566
3560
  });
3567
3561
  }
3568
3562
 
3569
- 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}";
3570
3563
  var scopedId$7 = "vf-b05292";
3571
- styleInject(css_248z$c);
3572
3564
 
3573
3565
  const LeftToolbar = withAnnotation({
3574
3566
  providers: [RefreshService]
@@ -3596,11 +3588,12 @@ const LeftToolbar = withAnnotation({
3596
3588
  top: 0,
3597
3589
  display: false
3598
3590
  });
3591
+ let isIgnoreMove = false;
3599
3592
  onMounted(() => {
3600
3593
  const rootComponent = rootComponentRef.component;
3601
3594
  const docContentContainer = adapter.getNativeNodeBySlot(rootComponent.state.content);
3602
3595
  const sub = fromEvent(docContentContainer, 'mousemove').pipe(filter(() => {
3603
- return selection.isCollapsed;
3596
+ return !isIgnoreMove;
3604
3597
  }), map(ev => {
3605
3598
  let currentNode = ev.target;
3606
3599
  while (currentNode) {
@@ -3675,18 +3668,6 @@ const LeftToolbar = withAnnotation({
3675
3668
  isShow.set(true);
3676
3669
  }));
3677
3670
  });
3678
- let snapshot = null;
3679
- function queryBefore() {
3680
- const slot = activeSlot();
3681
- if (slot) {
3682
- snapshot = selection.createSnapshot();
3683
- selection.selectSlot(slot);
3684
- }
3685
- }
3686
- function queryAfter() {
3687
- snapshot === null || snapshot === void 0 ? void 0 : snapshot.restore();
3688
- snapshot = null;
3689
- }
3690
3671
  function applyBefore() {
3691
3672
  const slot = activeSlot();
3692
3673
  if (slot) {
@@ -3727,11 +3708,14 @@ const LeftToolbar = withAnnotation({
3727
3708
  }
3728
3709
  }
3729
3710
  const isEmptyBlock = createSignal(true);
3711
+ function changeIgnoreMove(b) {
3712
+ isIgnoreMove = b;
3713
+ }
3730
3714
  return withScopedCSS(scopedId$7, () => {
3731
3715
  const position = positionSignal();
3732
3716
  const slot = activeSlot();
3733
3717
  let activeNode = jsx("span", { class: "xnote-icon-pilcrow" });
3734
- const states = checkStates();
3718
+ const states = checkStates(slot);
3735
3719
  if (slot) {
3736
3720
  const types = [
3737
3721
  [states.paragraph, jsx("span", { class: "xnote-icon-pilcrow" })],
@@ -3759,11 +3743,14 @@ const LeftToolbar = withAnnotation({
3759
3743
  left: position.left + 'px',
3760
3744
  top: position.top + 'px',
3761
3745
  display: position.display && selection.isCollapsed ? 'block' : 'none'
3762
- }, children: jsx(Dropdown, { abreast: true, style: {
3746
+ }, children: jsx(Dropdown, { onExpendStateChange: changeIgnoreMove, abreast: true, style: {
3763
3747
  position: 'absolute',
3764
3748
  right: 0,
3765
3749
  top: 0
3766
- }, menu: jsxs(Fragment, { children: [jsxs("div", { class: "btn-group", children: [jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsx("span", { class: "xnote-icon-pilcrow" }) }), jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsx("span", { class: "xnote-icon-heading-h1" }) }), jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsx("span", { class: "xnote-icon-heading-h2" }) }), jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsx("span", { class: "xnote-icon-heading-h3" }) }), jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsx("span", { class: "xnote-icon-heading-h4" }) }), jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsx("span", { class: "xnote-icon-list-numbered" }) }), jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsx("span", { class: "xnote-icon-list" }) }), jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsx("span", { class: "xnote-icon-quotes-right" }) }), jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsx("span", { class: "xnote-icon-source-code" }) })] }), jsx(Divider, {}), jsx(AttrTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, queryBefore: queryBefore, queryAfter: queryAfter, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsx(ColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, queryBefore: queryBefore, queryAfter: queryAfter, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-color" }), children: "\u989C\u8272" }) }), jsx(Divider, {}), jsx(MenuItem, { onClick: copy, icon: jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsx(MenuItem, { onClick: remove, icon: jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsx(MenuItem, { onClick: cut, icon: jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsx(Divider, {}), jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsx(InsertTool, { slot: activeSlot() }), children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
3750
+ }, menu: isEmptyBlock() ?
3751
+ jsx(InsertTool, { replace: true, slot: activeSlot() })
3752
+ :
3753
+ jsxs(Fragment, { children: [jsxs("div", { class: "btn-group", children: [jsx(Button, { ordinary: true, highlight: states.paragraph, onClick: () => transform('paragraph'), children: jsx("span", { class: "xnote-icon-pilcrow" }) }), jsx(Button, { ordinary: true, highlight: states.h1, onClick: () => transform('h1'), children: jsx("span", { class: "xnote-icon-heading-h1" }) }), jsx(Button, { ordinary: true, highlight: states.h2, onClick: () => transform('h2'), children: jsx("span", { class: "xnote-icon-heading-h2" }) }), jsx(Button, { ordinary: true, highlight: states.h3, onClick: () => transform('h3'), children: jsx("span", { class: "xnote-icon-heading-h3" }) }), jsx(Button, { ordinary: true, highlight: states.h4, onClick: () => transform('h4'), children: jsx("span", { class: "xnote-icon-heading-h4" }) }), jsx(Button, { ordinary: true, highlight: states.todolist, onClick: () => transform('todolist'), children: jsx("span", { class: "xnote-icon-checkbox-checked" }) }), jsx(Button, { ordinary: true, highlight: states.orderedList, onClick: () => transform('ol'), children: jsx("span", { class: "xnote-icon-list-numbered" }) }), jsx(Button, { ordinary: true, highlight: states.unorderedList, onClick: () => transform('ul'), children: jsx("span", { class: "xnote-icon-list" }) }), jsx(Button, { ordinary: true, highlight: states.blockquote, onClick: () => transform('blockquote'), children: jsx("span", { class: "xnote-icon-quotes-right" }) }), jsx(Button, { ordinary: true, highlight: states.sourceCode, onClick: () => transform('sourceCode'), children: jsx("span", { class: "xnote-icon-source-code" }) })] }), jsx(Divider, {}), jsx(AttrTool, { style: { display: 'block' }, abreast: true, slot: slot, applyBefore: applyBefore, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-indent-decrease" }), children: "\u7F29\u8FDB\u548C\u5BF9\u9F50" }) }), jsx(ColorTool, { style: { display: 'block' }, abreast: true, applyBefore: applyBefore, children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-color" }), children: "\u989C\u8272" }) }), jsx(Divider, {}), jsx(MenuItem, { onClick: copy, icon: jsx("span", { class: "xnote-icon-copy" }), children: "\u590D\u5236" }), jsx(MenuItem, { onClick: remove, icon: jsx("span", { class: "xnote-icon-bin" }), children: "\u5220\u9664" }), jsx(MenuItem, { onClick: cut, icon: jsx("span", { class: "xnote-icon-cut" }), children: "\u526A\u5207" }), jsx(Divider, {}), jsx(Dropdown, { style: { display: 'block' }, abreast: true, menu: jsx(InsertTool, { slot: activeSlot() }), children: jsx(MenuItem, { arrow: true, icon: jsx("span", { class: "xnote-icon-plus" }), children: "\u5728\u4E0B\u9762\u6DFB\u52A0" }) })] }), children: jsx("button", { type: "button", class: "left-toolbar-btn", children: isEmptyBlock() ?
3767
3754
  jsx("span", { children: jsx("i", { class: "xnote-icon-plus" }) })
3768
3755
  :
3769
3756
  jsxs("span", { children: [activeNode, jsx("i", { style: "font-size: 12px", class: "xnote-icon-more" })] }) }) }) }) }));
@@ -3772,12 +3759,7 @@ const LeftToolbar = withAnnotation({
3772
3759
 
3773
3760
  class LeftToolbarPlugin {
3774
3761
  constructor() {
3775
- Object.defineProperty(this, "app", {
3776
- enumerable: true,
3777
- configurable: true,
3778
- writable: true,
3779
- value: null
3780
- });
3762
+ this.app = null;
3781
3763
  }
3782
3764
  setup(injector) {
3783
3765
  const App = function () {
@@ -3792,7 +3774,7 @@ class LeftToolbarPlugin {
3792
3774
  nativeRenderer: new DomRenderer(),
3793
3775
  autoUpdate: true
3794
3776
  });
3795
- const viewDocument = injector.get(VIEW_DOCUMENT);
3777
+ const viewDocument = injector.get(VIEW_CONTAINER);
3796
3778
  const host = document.createElement('div');
3797
3779
  viewDocument.appendChild(host);
3798
3780
  this.app.mount(host);
@@ -3803,18 +3785,11 @@ class LeftToolbarPlugin {
3803
3785
  }
3804
3786
  }
3805
3787
 
3806
- 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}";
3807
3788
  var scopedId$6 = "vf-fee98b";
3808
- styleInject(css_248z$b);
3809
3789
 
3810
3790
  let EditorService = class EditorService {
3811
3791
  constructor() {
3812
- Object.defineProperty(this, "hideInlineToolbar", {
3813
- enumerable: true,
3814
- configurable: true,
3815
- writable: true,
3816
- value: false
3817
- });
3792
+ this.hideInlineToolbar = false;
3818
3793
  }
3819
3794
  };
3820
3795
  EditorService = __decorate([
@@ -3827,7 +3802,7 @@ const Toolbar = withAnnotation({
3827
3802
  providers: [RefreshService]
3828
3803
  }, function Toolbar() {
3829
3804
  const selection = inject(Selection);
3830
- const viewDocument = inject(VIEW_DOCUMENT);
3805
+ const viewDocument = inject(VIEW_CONTAINER);
3831
3806
  const bridge = inject(SelectionBridge);
3832
3807
  const textbus = inject(Textbus);
3833
3808
  const editorService = inject(EditorService);
@@ -3865,7 +3840,6 @@ const Toolbar = withAnnotation({
3865
3840
  selectionFocusRect.top + selectionFocusRect.height - docRect.top + 10 :
3866
3841
  selectionFocusRect.top - docRect.top - toolbarRect.height - 10;
3867
3842
  updateViewPosition(draft => {
3868
- draft.isHide = false;
3869
3843
  draft.transitionDuration = .15;
3870
3844
  draft.left = centerLeft - docRect.left;
3871
3845
  draft.top = top + 10;
@@ -3893,6 +3867,7 @@ const Toolbar = withAnnotation({
3893
3867
  }), map(getTop), delay(200)).subscribe((top) => {
3894
3868
  if (top !== null) {
3895
3869
  updateViewPosition(draft => {
3870
+ draft.isHide = false;
3896
3871
  draft.opacity = 1;
3897
3872
  draft.top = top;
3898
3873
  });
@@ -3935,12 +3910,7 @@ const Toolbar = withAnnotation({
3935
3910
 
3936
3911
  class ToolbarPlugin {
3937
3912
  constructor() {
3938
- Object.defineProperty(this, "app", {
3939
- enumerable: true,
3940
- configurable: true,
3941
- writable: true,
3942
- value: null
3943
- });
3913
+ this.app = null;
3944
3914
  }
3945
3915
  setup(injector) {
3946
3916
  const App = function () {
@@ -3965,30 +3935,10 @@ class ToolbarPlugin {
3965
3935
 
3966
3936
  class Matcher {
3967
3937
  constructor(target, rule) {
3968
- Object.defineProperty(this, "target", {
3969
- enumerable: true,
3970
- configurable: true,
3971
- writable: true,
3972
- value: target
3973
- });
3974
- Object.defineProperty(this, "rule", {
3975
- enumerable: true,
3976
- configurable: true,
3977
- writable: true,
3978
- value: rule
3979
- });
3980
- Object.defineProperty(this, "validators", {
3981
- enumerable: true,
3982
- configurable: true,
3983
- writable: true,
3984
- value: []
3985
- });
3986
- Object.defineProperty(this, "excludeValidators", {
3987
- enumerable: true,
3988
- configurable: true,
3989
- writable: true,
3990
- value: []
3991
- });
3938
+ this.target = target;
3939
+ this.rule = rule;
3940
+ this.validators = [];
3941
+ this.excludeValidators = [];
3992
3942
  if (rule.tags) {
3993
3943
  this.validators.push(this.makeTagsMatcher(rule.tags));
3994
3944
  }
@@ -4080,155 +4030,47 @@ class Matcher {
4080
4030
  }
4081
4031
  }
4082
4032
 
4083
- var css_248z$a = ".xnote-image{display:inline-block}.xnote-image,.xnote-image img{max-width:100%}";
4084
- styleInject(css_248z$a);
4085
-
4086
- class ImageComponent extends Component {
4087
- static fromJSON(textbus, json) {
4088
- return new ImageComponent(textbus, Object.assign({}, json));
4089
- }
4090
- }
4091
- Object.defineProperty(ImageComponent, "type", {
4092
- enumerable: true,
4093
- configurable: true,
4094
- writable: true,
4095
- value: ContentType.InlineComponent
4096
- });
4097
- Object.defineProperty(ImageComponent, "componentName", {
4098
- enumerable: true,
4099
- configurable: true,
4100
- writable: true,
4101
- value: 'ImageComponent'
4102
- });
4103
- function ImageView(props) {
4104
- const { name, state } = props.component;
4105
- const imageRef = createRef();
4106
- const readonly = useReadonly();
4107
- const output = useOutput();
4108
- return () => {
4109
- if (readonly() || output()) {
4110
- return (jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsx("img", { alt: "", src: state.src, style: {
4111
- width: state.width,
4112
- height: state.height
4113
- } }) }));
4114
- }
4115
- return (jsx("div", { class: "xnote-image", ref: props.rootRef, "data-component": name, children: jsx(DragResize, { source: imageRef, component: props.component, children: jsx("img", { alt: "", ref: imageRef, src: state.src, style: {
4116
- width: state.width,
4117
- height: state.height
4118
- } }) }) }));
4119
- };
4120
- }
4121
- const imageComponentLoader = {
4122
- match(element) {
4123
- return element.tagName === 'IMG' || element.dataset.component === ImageComponent.componentName;
4124
- },
4125
- read(element, textbus) {
4126
- var _a;
4127
- return new ImageComponent(textbus, {
4128
- src: element instanceof HTMLImageElement ? element.src : ((_a = element.querySelector('img')) === null || _a === void 0 ? void 0 : _a.src) || ''
4129
- });
4130
- }
4131
- };
4132
-
4133
- 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}";
4134
- styleInject(css_248z$9);
4135
-
4136
4033
  class RootComponent extends Component {
4137
4034
  constructor() {
4138
4035
  super(...arguments);
4139
- Object.defineProperty(this, "onCompositionStart", {
4140
- enumerable: true,
4141
- configurable: true,
4142
- writable: true,
4143
- value: new Subject()
4144
- });
4036
+ this.onCompositionStart = new Subject();
4145
4037
  }
4146
4038
  static fromJSON(textbus, json) {
4147
- const heading = textbus.get(Registry).createSlot(json.heading);
4148
4039
  const content = textbus.get(Registry).createSlot(json.content);
4149
4040
  return new RootComponent(textbus, {
4150
- heading,
4151
4041
  content
4152
4042
  });
4153
4043
  }
4154
4044
  setup() {
4155
- const textbus = useContext();
4156
- const selection = textbus.get(Selection);
4157
- onBreak(ev => {
4158
- if (ev.target === this.state.heading) {
4159
- const afterContent = ev.target.cut(ev.data.index);
4160
- const p = new ParagraphComponent(textbus, {
4161
- slot: afterContent
4162
- });
4163
- const body = this.state.content;
4164
- body.retain(0);
4165
- body.insert(p);
4166
- selection.setPosition(afterContent, 0);
4167
- ev.preventDefault();
4168
- }
4169
- });
4170
4045
  useBlockContent(this.state.content);
4171
4046
  onCompositionStart(ev => {
4172
4047
  this.onCompositionStart.next(ev);
4173
4048
  });
4174
4049
  }
4175
- afterCheck() {
4176
- const content = this.state.content;
4177
- const lastContent = content.getContentAtIndex(content.length - 1);
4178
- if (lastContent instanceof ParagraphComponent ||
4179
- lastContent instanceof ListComponent ||
4180
- lastContent instanceof TodolistComponent) {
4181
- return;
4182
- }
4183
- content.retain(content.length);
4184
- content.insert(new ParagraphComponent(this.textbus));
4185
- }
4186
4050
  }
4187
- Object.defineProperty(RootComponent, "componentName", {
4188
- enumerable: true,
4189
- configurable: true,
4190
- writable: true,
4191
- value: 'RootComponent'
4192
- });
4193
- Object.defineProperty(RootComponent, "type", {
4194
- enumerable: true,
4195
- configurable: true,
4196
- writable: true,
4197
- value: ContentType.BlockComponent
4198
- });
4051
+ RootComponent.componentName = 'RootComponent';
4052
+ RootComponent.type = ContentType.BlockComponent;
4199
4053
  function RootView(props) {
4200
4054
  const adapter = inject(DomAdapter);
4201
- const { heading, content } = props.component.state;
4055
+ const { content } = props.component.state;
4202
4056
  const ref = createDynamicRef(node => {
4203
- const sub = props.component.onCompositionStart.subscribe(ev => {
4204
- if (ev.target === heading) {
4205
- node.children[0].dataset.placeholder = '';
4206
- }
4207
- else {
4208
- node.children[1].dataset.placeholder = '';
4209
- }
4057
+ const sub = props.component.onCompositionStart.subscribe(() => {
4058
+ node.children[0].dataset.placeholder = '';
4210
4059
  });
4211
4060
  return () => {
4212
4061
  sub.unsubscribe();
4213
4062
  };
4214
4063
  });
4215
- onUpdated(() => {
4216
- props.component.afterCheck();
4217
- });
4218
4064
  const readonly = useReadonly();
4065
+ const output = useOutput();
4219
4066
  return () => {
4220
4067
  const { rootRef } = props;
4221
- return (jsxs("div", { class: "xnote-root", ref: [rootRef, ref], children: [adapter.slotRender(heading, children => {
4222
- return (createVNode('div', {
4223
- class: 'xnote-title',
4224
- 'data-placeholder': heading.isEmpty ? '请输入标题' : ''
4225
- }, children));
4226
- }, readonly()), adapter.slotRender(content, children => {
4227
- return (createVNode('div', {
4228
- class: 'xnote-content',
4229
- 'data-placeholder': content.isEmpty ? '请输入内容' : ''
4230
- }, children));
4231
- }, readonly())] }));
4068
+ return (jsx("div", { class: "xnote-root", ref: [rootRef, ref], children: adapter.slotRender(content, children => {
4069
+ return (createVNode('div', {
4070
+ class: 'xnote-content',
4071
+ 'data-placeholder': content.isEmpty ? '请输入内容' : ''
4072
+ }, children));
4073
+ }, readonly() || output()) }));
4232
4074
  };
4233
4075
  }
4234
4076
  const rootComponentLoader = {
@@ -4253,45 +4095,15 @@ const rootComponentLoader = {
4253
4095
  }
4254
4096
  };
4255
4097
 
4256
- 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}";
4257
- styleInject(css_248z$8);
4258
-
4259
- 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}";
4260
4098
  var scopedId$5 = "vf-681de2";
4261
- styleInject(css_248z$7);
4262
4099
 
4263
4100
  let TableService = class TableService {
4264
4101
  constructor() {
4265
- Object.defineProperty(this, "onInsertRowBefore", {
4266
- enumerable: true,
4267
- configurable: true,
4268
- writable: true,
4269
- value: new Subject()
4270
- });
4271
- Object.defineProperty(this, "onInsertColumnBefore", {
4272
- enumerable: true,
4273
- configurable: true,
4274
- writable: true,
4275
- value: new Subject()
4276
- });
4277
- Object.defineProperty(this, "onSelectColumns", {
4278
- enumerable: true,
4279
- configurable: true,
4280
- writable: true,
4281
- value: new Subject()
4282
- });
4283
- Object.defineProperty(this, "onSelectRows", {
4284
- enumerable: true,
4285
- configurable: true,
4286
- writable: true,
4287
- value: new Subject()
4288
- });
4289
- Object.defineProperty(this, "onScroll", {
4290
- enumerable: true,
4291
- configurable: true,
4292
- writable: true,
4293
- value: new Subject()
4294
- });
4102
+ this.onInsertRowBefore = new Subject();
4103
+ this.onInsertColumnBefore = new Subject();
4104
+ this.onSelectColumns = new Subject();
4105
+ this.onSelectRows = new Subject();
4106
+ this.onScroll = new Subject();
4295
4107
  }
4296
4108
  };
4297
4109
  TableService = __decorate([
@@ -4340,16 +4152,19 @@ function ResizeColumn(props) {
4340
4152
  const initLeft = layoutWidth.slice(0, activeCol).reduce((a, b) => a + b, 0);
4341
4153
  const minWidth = 30;
4342
4154
  const minLeft = initLeft - initWidth + minWidth;
4155
+ const layoutWidthArr = layoutWidth.slice();
4343
4156
  const moveEvent = fromEvent(document, 'mousemove').subscribe(moveEvent => {
4344
4157
  const distanceX = moveEvent.clientX - x;
4345
4158
  dragLineRef.current.style.left = Math.max(initLeft + distanceX, minLeft) + 'px';
4346
- props.component.state.layoutWidth[activeCol - 1] = Math.max(initWidth + distanceX, minWidth);
4159
+ layoutWidthArr[activeCol - 1] = Math.max(initWidth + distanceX, minWidth);
4160
+ props.layoutWidth.set(layoutWidthArr.slice());
4347
4161
  }).add(fromEvent(document, 'mouseup').subscribe(upEvent => {
4348
4162
  isDrag = false;
4349
4163
  props.onActiveStateChange(false);
4350
4164
  moveEvent.unsubscribe();
4351
4165
  const distanceX = upEvent.clientX - x;
4352
4166
  props.component.state.layoutWidth[activeCol - 1] = Math.max(initWidth + distanceX, minWidth);
4167
+ props.layoutWidth.set(props.component.state.layoutWidth);
4353
4168
  }));
4354
4169
  }));
4355
4170
  return () => {
@@ -4375,9 +4190,7 @@ function ResizeColumn(props) {
4375
4190
  });
4376
4191
  }
4377
4192
 
4378
- 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}";
4379
- var scopedId$4 = "vf-5bce97";
4380
- styleInject(css_248z$6);
4193
+ var scopedId$4 = "vf-d64cf9";
4381
4194
 
4382
4195
  function TopBar(props) {
4383
4196
  const editorService = inject(EditorService);
@@ -4452,7 +4265,7 @@ function TopBar(props) {
4452
4265
  active: props.isFocus()
4453
4266
  }], children: jsxs("div", { class: "toolbar-wrapper", children: [jsx("div", { class: "insert-bar", children: jsx("table", { style: {
4454
4267
  transform: `translateX(${-leftDistance()}px)`
4455
- }, children: jsx("tbody", { children: jsx("tr", { children: state.layoutWidth.map((i, index) => {
4268
+ }, children: jsx("tbody", { children: jsx("tr", { children: props.layoutWidth().map((i, index) => {
4456
4269
  return (jsx("td", { style: { width: i + 'px', minWidth: i + 'px' }, children: jsxs("div", { class: "tool-container", children: [index === 0 && (jsx("span", { onMouseenter: () => {
4457
4270
  tableService.onInsertColumnBefore.next(0);
4458
4271
  }, onMouseleave: () => {
@@ -4478,7 +4291,7 @@ function TopBar(props) {
4478
4291
  }, children: jsx("span", { class: "xnote-icon-bin" }) }) }) })] }) }));
4479
4292
  }) }) }) }) }), jsx("div", { class: ['action-bar', { active: props.isFocus() }], children: jsx("table", { style: {
4480
4293
  transform: `translateX(${-leftDistance()}px)`
4481
- }, children: jsx("tbody", { children: jsx("tr", { children: state.layoutWidth.map((i, index) => {
4294
+ }, children: jsx("tbody", { children: jsx("tr", { children: props.layoutWidth().map((i, index) => {
4482
4295
  return jsx("td", { onClick: ev => {
4483
4296
  mouseDownFromToolbar = true;
4484
4297
  if (!ev.shiftKey) {
@@ -4498,9 +4311,7 @@ function TopBar(props) {
4498
4311
  });
4499
4312
  }
4500
4313
 
4501
- 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}";
4502
4314
  var scopedId$3 = "vf-b1149b";
4503
- styleInject(css_248z$5);
4504
4315
 
4505
4316
  function Scroll(props) {
4506
4317
  const scrollRef = createRef();
@@ -4544,9 +4355,7 @@ function Scroll(props) {
4544
4355
  });
4545
4356
  }
4546
4357
 
4547
- 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}";
4548
4358
  var scopedId$2 = "vf-ef93c0";
4549
- styleInject(css_248z$4);
4550
4359
 
4551
4360
  function LeftBar(props) {
4552
4361
  const editorService = inject(EditorService);
@@ -4668,9 +4477,7 @@ function LeftBar(props) {
4668
4477
  });
4669
4478
  }
4670
4479
 
4671
- 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}";
4672
4480
  var scopedId$1 = "vf-d4c4a9";
4673
- styleInject(css_248z$3);
4674
4481
 
4675
4482
  function sum(numbers) {
4676
4483
  return numbers.reduce((a, b) => a + b, 0);
@@ -4712,9 +4519,7 @@ function ResizeRow(props) {
4712
4519
  });
4713
4520
  }
4714
4521
 
4715
- 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}";
4716
- var scopedId = "vf-e16878";
4717
- styleInject(css_248z$2);
4522
+ var scopedId = "vf-4a5ad1";
4718
4523
 
4719
4524
  function SelectionMask(props) {
4720
4525
  const [styles, updateStyles] = useProduce({
@@ -4785,9 +4590,14 @@ const TableComponentView = withAnnotation({
4785
4590
  providers: [TableService]
4786
4591
  }, function TableComponentView(props) {
4787
4592
  const adapter = inject(DomAdapter);
4593
+ const editorService = inject(EditorService);
4788
4594
  const isFocus = createSignal(false);
4595
+ const layoutWidth = createSignal(props.component.state.layoutWidth);
4789
4596
  const subscription = props.component.focus.subscribe(b => {
4790
4597
  isFocus.set(b);
4598
+ if (!b) {
4599
+ editorService.hideInlineToolbar = false;
4600
+ }
4791
4601
  });
4792
4602
  onUnmounted(() => {
4793
4603
  subscription.unsubscribe();
@@ -4795,67 +4605,6 @@ const TableComponentView = withAnnotation({
4795
4605
  const tableRef = createRef();
4796
4606
  const scrollRef = createRef();
4797
4607
  const isResizeColumn = createSignal(false);
4798
- const selection = inject(Selection);
4799
- const findPosition = (slot) => {
4800
- let cell = slot;
4801
- while ((cell === null || cell === void 0 ? void 0 : cell.parent) && cell.parent !== props.component) {
4802
- cell = cell.parentSlot;
4803
- }
4804
- if (cell) {
4805
- const rows = props.component.state.rows;
4806
- for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
4807
- const row = rows[rowIndex].cells;
4808
- for (let colIndex = 0; colIndex < row.length; colIndex++) {
4809
- const item = row[colIndex].slot;
4810
- if (item === cell) {
4811
- return {
4812
- rowIndex,
4813
- colIndex
4814
- };
4815
- }
4816
- }
4817
- }
4818
- }
4819
- return null;
4820
- };
4821
- onMounted(() => {
4822
- const sub = selection.onChange.subscribe(() => {
4823
- var _a;
4824
- if (selection.commonAncestorComponent !== props.component || selection.isCollapsed) {
4825
- props.component.tableSelection.set(null);
4826
- return;
4827
- }
4828
- const startPosition = findPosition(selection.startSlot);
4829
- const endPosition = findPosition(selection.endSlot);
4830
- if (startPosition && endPosition) {
4831
- if (startPosition.rowIndex === endPosition.rowIndex && startPosition.colIndex === endPosition.colIndex) {
4832
- if (selection.startSlot === selection.endSlot && selection.startOffset === 0 && selection.endOffset === ((_a = selection.startSlot) === null || _a === void 0 ? void 0 : _a.length)) {
4833
- props.component.tableSelection.set({
4834
- startColumn: startPosition.colIndex,
4835
- startRow: startPosition.rowIndex,
4836
- endColumn: endPosition.colIndex + 1,
4837
- endRow: endPosition.rowIndex + 1
4838
- });
4839
- return;
4840
- }
4841
- props.component.tableSelection.set(null);
4842
- return;
4843
- }
4844
- const [startColumn, endColumn] = [startPosition.colIndex, endPosition.colIndex].sort((a, b) => a - b);
4845
- const [startRow, endRow] = [startPosition.rowIndex, endPosition.rowIndex].sort((a, b) => a - b);
4846
- props.component.tableSelection.set({
4847
- startColumn,
4848
- startRow,
4849
- endColumn: endColumn + 1,
4850
- endRow: endRow + 1
4851
- });
4852
- }
4853
- else {
4854
- props.component.tableSelection.set(null);
4855
- }
4856
- });
4857
- return () => sub.unsubscribe();
4858
- });
4859
4608
  const rowMapping = new WeakMap();
4860
4609
  const readonly = useReadonly();
4861
4610
  const output = useOutput();
@@ -4877,7 +4626,7 @@ const TableComponentView = withAnnotation({
4877
4626
  {
4878
4627
  'hide-selection': props.component.tableSelection()
4879
4628
  }
4880
- ], children: [jsx("colgroup", { children: state.layoutWidth.map(w => {
4629
+ ], children: [jsx("colgroup", { children: layoutWidth().map(w => {
4881
4630
  return jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
4882
4631
  }) }), jsx("tbody", { children: rows.map((row) => {
4883
4632
  return (jsx("tr", { children: row.cells.map(cell => {
@@ -4885,16 +4634,16 @@ const TableComponentView = withAnnotation({
4885
4634
  return createVNode('td', {
4886
4635
  key: cell.slot.id
4887
4636
  }, children);
4888
- }, readonly());
4637
+ }, readonly() || output());
4889
4638
  }) }, rowMapping.get(row)));
4890
4639
  }) })] }) }) }));
4891
4640
  }
4892
- return (jsxs("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": state.layoutWidth, ref: props.rootRef, children: [jsx(TopBar, { isFocus: isFocus, component: props.component, scrollRef: scrollRef }), jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsx(Scroll, { scrollRef: scrollRef, isFocus: isFocus, children: jsxs("div", { class: "xnote-table-container", children: [jsxs("table", { ref: tableRef, class: [
4641
+ return (jsxs("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": state.layoutWidth, ref: props.rootRef, children: [jsx(TopBar, { isFocus: isFocus, layoutWidth: layoutWidth, component: props.component, scrollRef: scrollRef }), jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsx(Scroll, { scrollRef: scrollRef, isFocus: isFocus, children: jsxs("div", { class: "xnote-table-container", children: [jsxs("table", { ref: tableRef, class: [
4893
4642
  'xnote-table-content',
4894
4643
  {
4895
4644
  'hide-selection': props.component.tableSelection()
4896
4645
  }
4897
- ], children: [jsx("colgroup", { children: state.layoutWidth.map(w => {
4646
+ ], children: [jsx("colgroup", { children: layoutWidth().map(w => {
4898
4647
  return jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
4899
4648
  }) }), jsx("tbody", { children: rows.map((row) => {
4900
4649
  return (jsx("tr", { children: row.cells.map(cell => {
@@ -4902,9 +4651,9 @@ const TableComponentView = withAnnotation({
4902
4651
  return createVNode('td', {
4903
4652
  key: cell.slot.id
4904
4653
  }, children);
4905
- }, readonly());
4654
+ }, readonly() || output());
4906
4655
  }) }, rowMapping.get(row)));
4907
- }) })] }), jsx(ResizeColumn, { tableRef: tableRef, component: props.component, onActiveStateChange: isActive => {
4656
+ }) })] }), jsx(ResizeColumn, { tableRef: tableRef, component: props.component, layoutWidth: layoutWidth, onActiveStateChange: isActive => {
4908
4657
  isResizeColumn.set(isActive);
4909
4658
  } }), jsx(SelectionMask, { tableRef: tableRef, component: props.component })] }) }), jsx(ResizeRow, { component: props.component, tableRef: tableRef })] }));
4910
4659
  };
@@ -4927,8 +4676,6 @@ const tableComponentLoader = {
4927
4676
  Array.from(row.cells).forEach(cell => {
4928
4677
  const slot = new Slot([
4929
4678
  ContentType.BlockComponent,
4930
- ContentType.InlineComponent,
4931
- ContentType.Text
4932
4679
  ]);
4933
4680
  arr.push({
4934
4681
  slot,
@@ -4937,8 +4684,6 @@ const tableComponentLoader = {
4937
4684
  });
4938
4685
  const delta = slotParser(new Slot([
4939
4686
  ContentType.BlockComponent,
4940
- ContentType.InlineComponent,
4941
- ContentType.Text
4942
4687
  ]), cell).toDelta();
4943
4688
  const results = deltaToBlock(delta, textbus);
4944
4689
  results.forEach(i => {
@@ -4956,8 +4701,6 @@ const tableComponentLoader = {
4956
4701
  Array.from(row.cells).forEach(cell => {
4957
4702
  const slot = new Slot([
4958
4703
  ContentType.BlockComponent,
4959
- ContentType.InlineComponent,
4960
- ContentType.Text
4961
4704
  ]);
4962
4705
  arr.push({
4963
4706
  slot,
@@ -4966,8 +4709,6 @@ const tableComponentLoader = {
4966
4709
  });
4967
4710
  const delta = slotParser(new Slot([
4968
4711
  ContentType.BlockComponent,
4969
- ContentType.InlineComponent,
4970
- ContentType.Text
4971
4712
  ]), cell).toDelta();
4972
4713
  const results = deltaToBlock(delta, textbus);
4973
4714
  results.forEach(i => {
@@ -5044,8 +4785,6 @@ function autoComplete(table) {
5044
4785
  rowspan: 1,
5045
4786
  colspan: 1,
5046
4787
  slot: new Slot([
5047
- ContentType.Text,
5048
- ContentType.InlineComponent,
5049
4788
  ContentType.BlockComponent
5050
4789
  ])
5051
4790
  };
@@ -5065,65 +4804,9 @@ function autoComplete(table) {
5065
4804
  });
5066
4805
  }
5067
4806
 
5068
- var css_248z$1 = ".xnote-video{display:inline-block}.xnote-video,.xnote-video video{max-width:100%}";
5069
- styleInject(css_248z$1);
5070
-
5071
- class VideoComponent extends Component {
5072
- static fromJSON(textbus, json) {
5073
- return new VideoComponent(textbus, Object.assign({}, json));
5074
- }
5075
- setup() {
5076
- //
5077
- }
5078
- }
5079
- Object.defineProperty(VideoComponent, "type", {
5080
- enumerable: true,
5081
- configurable: true,
5082
- writable: true,
5083
- value: ContentType.InlineComponent
5084
- });
5085
- Object.defineProperty(VideoComponent, "componentName", {
5086
- enumerable: true,
5087
- configurable: true,
5088
- writable: true,
5089
- value: 'VideoComponent'
5090
- });
5091
- function VideoView(props) {
5092
- const { name, state } = props.component;
5093
- const videoRef = createRef();
5094
- const readonly = useReadonly();
5095
- const output = useOutput();
5096
- return () => {
5097
- if (readonly() || output()) {
5098
- return (jsx("div", { class: "xnote-video", "data-component": name, children: jsx("video", { ref: videoRef, src: state.src, style: {
5099
- width: state.width,
5100
- height: state.height
5101
- } }) }));
5102
- }
5103
- return (jsx("div", { ref: props.rootRef, class: "xnote-video", "data-component": name, children: jsx(DragResize, { source: videoRef, component: props.component, children: jsx("video", { ref: videoRef, src: state.src, style: {
5104
- width: state.width,
5105
- height: state.height
5106
- } }) }) }));
5107
- };
5108
- }
5109
- const videoComponentLoader = {
5110
- match(element) {
5111
- return element.tagName === 'IMG' || element.dataset.component === VideoComponent.componentName;
5112
- },
5113
- read(element, textbus) {
5114
- var _a;
5115
- return new VideoComponent(textbus, {
5116
- src: element instanceof HTMLImageElement ? element.src : ((_a = element.querySelector('video')) === null || _a === void 0 ? void 0 : _a.src) || ''
5117
- });
5118
- }
5119
- };
5120
-
5121
- 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}";
5122
- styleInject(css_248z);
5123
-
5124
- function createXNote(host, config = {}) {
5125
- return __awaiter(this, void 0, void 0, function* () {
5126
- const adapter = new Adapter({
4807
+ class Editor extends Textbus {
4808
+ constructor(editorConfig = {}) {
4809
+ const adapter = new ViewflyAdapter({
5127
4810
  [ParagraphComponent.componentName]: ParagraphView,
5128
4811
  [RootComponent.componentName]: RootView,
5129
4812
  [BlockquoteComponent.componentName]: BlockquoteView,
@@ -5134,8 +4817,8 @@ function createXNote(host, config = {}) {
5134
4817
  [ListComponent.componentName]: ListComponentView,
5135
4818
  [ImageComponent.componentName]: ImageView,
5136
4819
  [VideoComponent.componentName]: VideoView
5137
- }, (host, root) => {
5138
- const appInjector = new ReflectiveInjector(textbus, [{
4820
+ }, (host, root, injector) => {
4821
+ const appInjector = new ReflectiveInjector(injector, [{
5139
4822
  provide: OutputInjectionToken,
5140
4823
  useValue: false
5141
4824
  }]);
@@ -5146,23 +4829,19 @@ function createXNote(host, config = {}) {
5146
4829
  app.destroy();
5147
4830
  };
5148
4831
  });
5149
- const browserModule = new BrowserModule({
5150
- renderTo() {
5151
- return host;
5152
- },
5153
- adapter,
5154
- componentLoaders: [
4832
+ const browserModule = new BrowserModule(Object.assign({ renderTo: () => {
4833
+ return this.host;
4834
+ }, adapter, componentLoaders: [
4835
+ sourceCodeComponentLoader,
4836
+ tableComponentLoader,
4837
+ imageComponentLoader,
4838
+ videoComponentLoader,
5155
4839
  highlightBoxComponentLoader,
5156
4840
  blockquoteComponentLoader,
5157
4841
  paragraphComponentLoader,
5158
- sourceCodeComponentLoader,
5159
4842
  todolistComponentLoader,
5160
- tableComponentLoader,
5161
4843
  listComponentLoader,
5162
- imageComponentLoader,
5163
- videoComponentLoader
5164
- ],
5165
- formatLoaders: [
4844
+ ], formatLoaders: [
5166
4845
  backgroundColorFormatLoader,
5167
4846
  boldFormatLoader,
5168
4847
  codeFormatLoader,
@@ -5173,22 +4852,45 @@ function createXNote(host, config = {}) {
5173
4852
  linkFormatLoader,
5174
4853
  strikeThroughFormatLoader,
5175
4854
  underlineFormatLoader
5176
- ],
5177
- attributeLoaders: [
4855
+ ], attributeLoaders: [
5178
4856
  headingAttrLoader,
5179
4857
  textAlignAttrLoader,
5180
4858
  textIndentAttrLoader
5181
- ]
5182
- });
4859
+ ] }, editorConfig.viewOptions));
5183
4860
  const modules = [browserModule];
5184
- if (config.collaborateConfig) {
5185
- modules.push(new CollaborateModule(config.collaborateConfig));
4861
+ if (editorConfig.collaborateConfig) {
4862
+ modules.push(new CollaborateModule(editorConfig.collaborateConfig));
5186
4863
  }
5187
- const textbus = new Textbus({
5188
- zenCoding: true,
5189
- readonly: config.readonly,
5190
- imports: modules,
5191
- components: [
4864
+ const vDomAdapter = new ViewflyVDomAdapter({
4865
+ [ParagraphComponent.componentName]: ParagraphView,
4866
+ [RootComponent.componentName]: RootView,
4867
+ [BlockquoteComponent.componentName]: BlockquoteView,
4868
+ [TodolistComponent.componentName]: TodolistView,
4869
+ [SourceCodeComponent.componentName]: SourceCodeView,
4870
+ [TableComponent.componentName]: TableComponentView,
4871
+ [HighlightBoxComponent.componentName]: HighlightBoxView,
4872
+ [ListComponent.componentName]: ListComponentView,
4873
+ [ImageComponent.componentName]: ImageView,
4874
+ [VideoComponent.componentName]: VideoView
4875
+ }, (host, root, injector) => {
4876
+ const appInjector = new ReflectiveInjector(injector, [{
4877
+ provide: OutputInjectionToken,
4878
+ useValue: true
4879
+ }, {
4880
+ provide: DomAdapter,
4881
+ useFactory: () => {
4882
+ return vDomAdapter;
4883
+ }
4884
+ }]);
4885
+ const app = createApp(root, {
4886
+ context: appInjector,
4887
+ nativeRenderer: new HTMLRenderer()
4888
+ }).mount(host);
4889
+ return () => {
4890
+ app.destroy();
4891
+ };
4892
+ });
4893
+ super(Object.assign({ zenCoding: true, additionalAdapters: [vDomAdapter], imports: modules, components: [
5192
4894
  ImageComponent,
5193
4895
  ParagraphComponent,
5194
4896
  RootComponent,
@@ -5199,8 +4901,7 @@ function createXNote(host, config = {}) {
5199
4901
  HighlightBoxComponent,
5200
4902
  ListComponent,
5201
4903
  VideoComponent
5202
- ],
5203
- formatters: [
4904
+ ], formatters: [
5204
4905
  backgroundColorFormatter,
5205
4906
  boldFormatter,
5206
4907
  codeFormatter,
@@ -5211,18 +4912,14 @@ function createXNote(host, config = {}) {
5211
4912
  linkFormatter,
5212
4913
  strikeThroughFormatter,
5213
4914
  underlineFormatter
5214
- ],
5215
- attributes: [
4915
+ ], attributes: [
5216
4916
  headingAttr,
5217
4917
  textAlignAttr,
5218
4918
  textIndentAttr
5219
- ],
5220
- providers: [],
5221
- plugins: [
4919
+ ], plugins: [
5222
4920
  new LeftToolbarPlugin(),
5223
4921
  new ToolbarPlugin(),
5224
- ],
5225
- onAfterStartup(textbus) {
4922
+ ], onAfterStartup(textbus) {
5226
4923
  registerBoldShortcut(textbus);
5227
4924
  registerCodeShortcut(textbus);
5228
4925
  registerItalicShortcut(textbus);
@@ -5231,27 +4928,32 @@ function createXNote(host, config = {}) {
5231
4928
  registerHeadingShortcut(textbus);
5232
4929
  registerTextAlignShortcut(textbus);
5233
4930
  registerTextIndentShortcut(textbus);
5234
- }
5235
- });
4931
+ } }, editorConfig));
4932
+ this.editorConfig = editorConfig;
4933
+ this.translator = new OutputTranslator();
4934
+ this.vDomAdapter = vDomAdapter;
4935
+ }
4936
+ mount(host) {
4937
+ this.host = host;
5236
4938
  let rootComp;
4939
+ const config = this.editorConfig;
5237
4940
  if (config.content) {
5238
- const parser = textbus.get(Parser);
4941
+ const parser = this.get(Parser);
5239
4942
  const doc = parser.parseDoc(config.content, rootComponentLoader);
5240
- rootComp = doc instanceof Component ? doc : new RootComponent(textbus, {
5241
- heading: new Slot([ContentType.Text]),
4943
+ rootComp = doc instanceof Component ? doc : new RootComponent(this, {
5242
4944
  content: doc
5243
4945
  });
5244
4946
  }
5245
4947
  else {
5246
- rootComp = new RootComponent(textbus, {
5247
- heading: new Slot([ContentType.Text]),
5248
- content: new Slot([ContentType.Text, ContentType.InlineComponent, ContentType.BlockComponent])
4948
+ rootComp = new RootComponent(this, {
4949
+ content: new Slot([ContentType.BlockComponent])
5249
4950
  });
5250
4951
  }
5251
- yield textbus.render(rootComp);
5252
- // console.log(rootComp)
5253
- return textbus;
5254
- });
4952
+ return this.render(rootComp);
4953
+ }
4954
+ getHTML() {
4955
+ return this.translator.transform(this.vDomAdapter.host);
4956
+ }
5255
4957
  }
5256
4958
 
5257
- export { AttrTool, BlockTool, BlockquoteComponent, BlockquoteView, BoldTool, Button, CodeTool, ColorTool, ComponentToolbar, Divider, DragResize, Dropdown, DropdownContextService, DropdownMenuPortal, DropdownService, EditorService, FontFamilyTool, FontSizeTool, HighlightBoxComponent, HighlightBoxView, ImageComponent, ImageView, InsertTool, ItalicTool, LeftToolbar, LeftToolbarPlugin, LinkTool, ListComponent, ListComponentView, Matcher, MenuItem, OutputInjectionToken, ParagraphComponent, ParagraphView, Popup, RefreshService, RootComponent, RootView, SourceCodeComponent, SourceCodeView, StrikeThroughTool, TableComponent, TableComponentView, TodolistComponent, TodolistView, Toolbar, ToolbarItem, ToolbarPlugin, UnderlineTool, VideoComponent, VideoView, autoComplete, backgroundColorFormatLoader, backgroundColorFormatter, blockquoteComponentLoader, boldFormatLoader, boldFormatter, codeFormatLoader, codeFormatter, colorFormatLoader, colorFormatter, createXNote, deltaToBlock, fontFamilyFormatLoader, fontFamilyFormatter, fontSizeFormatLoader, fontSizeFormatter, headingAttr, headingAttrLoader, highlightBoxComponentLoader, imageComponentLoader, isSupportFont, italicFormatLoader, italicFormatter, languageList, linkFormatLoader, linkFormatter, listComponentLoader, paragraphComponentLoader, registerBoldShortcut, registerCodeShortcut, registerHeadingShortcut, registerItalicShortcut, registerStrikeThroughShortcut, registerTextAlignShortcut, registerTextIndentShortcut, registerUnderlineShortcut, rootComponentLoader, sourceCodeComponentLoader, sourceCodeThemes, strikeThroughFormatLoader, strikeThroughFormatter, tableComponentLoader, textAlignAttr, textAlignAttrLoader, textIndentAttr, textIndentAttrLoader, todolistComponentLoader, toggleBold, toggleCode, toggleItalic, toggleStrikeThrough, toggleUnderline, underlineFormatLoader, underlineFormatter, useActiveBlock, useBlockContent, useBlockTransform, useOutput, useReadonly, videoComponentLoader };
4959
+ export { AttrTool, BlockTool, BlockquoteComponent, BlockquoteView, BoldTool, Button, CodeTool, ColorTool, ComponentToolbar, Divider, DragResize, Dropdown, DropdownContextService, DropdownMenuPortal, DropdownService, Editor, EditorService, FontFamilyTool, FontSizeTool, HighlightBoxComponent, HighlightBoxView, ImageComponent, ImageView, InsertTool, ItalicTool, LeftToolbar, LeftToolbarPlugin, LinkTool, ListComponent, ListComponentView, Matcher, MenuItem, OutputInjectionToken, ParagraphComponent, ParagraphView, Popup, RefreshService, RootComponent, RootView, SourceCodeComponent, SourceCodeView, StrikeThroughTool, TableComponent, TableComponentView, TodolistComponent, TodolistView, Toolbar, ToolbarItem, ToolbarPlugin, UnderlineTool, VideoComponent, VideoView, autoComplete, backgroundColorFormatLoader, backgroundColorFormatter, blockquoteComponentLoader, boldFormatLoader, boldFormatter, codeFormatLoader, codeFormatter, colorFormatLoader, colorFormatter, deltaToBlock, fontFamilyFormatLoader, fontFamilyFormatter, fontSizeFormatLoader, fontSizeFormatter, headingAttr, headingAttrLoader, highlightBoxComponentLoader, imageComponentLoader, isSupportFont, italicFormatLoader, italicFormatter, languageList, linkFormatLoader, linkFormatter, listComponentLoader, paragraphComponentLoader, registerBoldShortcut, registerCodeShortcut, registerHeadingShortcut, registerItalicShortcut, registerStrikeThroughShortcut, registerTextAlignShortcut, registerTextIndentShortcut, registerUnderlineShortcut, rootComponentLoader, sourceCodeComponentLoader, sourceCodeThemes, strikeThroughFormatLoader, strikeThroughFormatter, tableComponentLoader, textAlignAttr, textAlignAttrLoader, textIndentAttr, textIndentAttrLoader, todolistComponentLoader, toggleBold, toggleCode, toggleItalic, toggleStrikeThrough, toggleUnderline, underlineFormatLoader, underlineFormatter, useActiveBlock, useBlockContent, useBlockTransform, useOutput, useReadonly, videoComponentLoader };