@textbus/xnote 0.0.1-alpha.46 → 0.0.1-alpha.47

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 (4) hide show
  1. package/bundles/index.esm.js +48 -54
  2. package/bundles/index.js +46 -52
  3. package/bundles/textbus/components/SlotRender.d.ts +14 -0
  4. package/package.json +9 -9
package/bundles/index.esm.js CHANGED
@@ -1,7 +1,7 @@
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, onUpdated, onMounted, InjectionToken, ReflectiveInjector, createDynamicRef, jsx as jsx$1, viewfly, getCurrentInstance, watch } from '@viewfly/core';
4
- import { Subject, Selection, fromEvent, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, Slot, Component, Registry, Query, QueryStateType, createVNode, BehaviorSubject, onSlotApplyFormat, onSlotSetAttribute, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDestroy, onGetRanges, Formatter, onParentSlotUpdated, Textbus, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, merge, debounceTime, throttleTime, delay, onContentInserted, onContentDeleted, switchMap, fromPromise, onCompositionStart } from '@textbus/core';
3
+ import { Injectable, InjectFlags, Injector, inject, createSignal, onUnmounted, createRef, withAnnotation, onUpdated, onMounted, InjectionToken, getCurrentInstance, ReflectiveInjector, createDynamicRef, jsx as jsx$1, viewfly, watch } from '@viewfly/core';
4
+ import { Subject, Selection, fromEvent, Subscription, Attribute, Keyboard, Commander, Controller, useContext, onBreak, onContentInsert, ContentType, merge, createVNode, Slot, Component, Registry, Query, QueryStateType, BehaviorSubject, onSlotApplyFormat, onSlotSetAttribute, onPaste, onFocus, onBlur, useDynamicShortcut, VTextNode, onFocusIn, onFocusOut, onDestroy, onGetRanges, Formatter, onParentSlotUpdated, Textbus, RootComponentRef, filter, map, distinctUntilChanged, sampleTime, debounceTime, throttleTime, delay, onContentInserted, onContentDeleted, switchMap, fromPromise, onCompositionStart } from '@textbus/core';
5
5
  import { VIEW_CONTAINER, isMac, DomAdapter, Input, SelectionBridge, BrowserModule, VIEW_DOCUMENT, CollaborateSelectionAwarenessDelegate, isMobileBrowser, Parser } from '@textbus/platform-browser';
6
6
  import { createPortal, createApp, DomRenderer, HTMLRenderer, OutputTranslator } from '@viewfly/platform-browser';
7
7
  import { useProduce } from '@viewfly/hooks';
@@ -30,6 +30,18 @@ PERFORMANCE OF THIS SOFTWARE.
30
30
  /* global Reflect, Promise, SuppressedError, Symbol */
31
31
 
32
32
 
33
+ function __rest(s, e) {
34
+ var t = {};
35
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
36
+ t[p] = s[p];
37
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
38
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
39
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
40
+ t[p[i]] = s[p[i]];
41
+ }
42
+ return t;
43
+ }
44
+
33
45
  function __decorate(decorators, target, key, desc) {
34
46
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
35
47
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -701,6 +713,26 @@ function useBlockContent(slot) {
701
713
  });
702
714
  }
703
715
 
716
+ function SlotRender(props) {
717
+ const adapter = inject(DomAdapter);
718
+ const instance = getCurrentInstance();
719
+ const slot = props.slot;
720
+ const sub = merge(slot.__changeMarker__.onChange, slot.__changeMarker__.onForceChange).subscribe(() => {
721
+ if (props.slot.__changeMarker__.dirty) {
722
+ instance.markAsDirtied();
723
+ }
724
+ });
725
+ onUnmounted(() => {
726
+ sub.unsubscribe();
727
+ });
728
+ return () => {
729
+ const { slot, tag = 'div', renderEnv = false, elRef, elKey } = props, rest = __rest(props, ["slot", "tag", "renderEnv", "elRef", "elKey"]);
730
+ return adapter.slotRender(slot, children => {
731
+ return createVNode(tag, Object.assign({ ref: elRef, key: elKey }, rest), children);
732
+ }, renderEnv);
733
+ };
734
+ }
735
+
704
736
  class BlockquoteComponent extends Component {
705
737
  static fromJSON(textbus, json) {
706
738
  const slot = textbus.get(Registry).createSlot(json.slot);
@@ -797,14 +829,11 @@ function registerBlockquoteShortcut(textbus) {
797
829
  });
798
830
  }
799
831
  function BlockquoteView(props) {
800
- const adapter = inject(DomAdapter);
801
832
  const readonly = useReadonly();
802
833
  const output = useOutput();
803
834
  return () => {
804
835
  const slot = props.component.state.slot;
805
- return (jsx("blockquote", { class: "xnote-blockquote", ref: props.rootRef, "data-component": props.component.name, children: adapter.slotRender(slot, children => {
806
- return createVNode('div', null, children);
807
- }, readonly() || output()) }));
836
+ return (jsx("blockquote", { class: "xnote-blockquote", ref: props.rootRef, "data-component": props.component.name, children: jsx(SlotRender, { slot: slot, renderEnv: readonly() || output() }) }));
808
837
  };
809
838
  }
810
839
  const blockquoteComponentLoader = {
@@ -855,7 +884,6 @@ HighlightBoxComponent.defaultTypes = ['❤️', '💡', '📌', '✅', '❎', '
855
884
  HighlightBoxComponent.componentName = 'HighlightBoxComponent';
856
885
  HighlightBoxComponent.type = ContentType.BlockComponent;
857
886
  function HighlightBoxView(props) {
858
- const adapter = inject(DomAdapter);
859
887
  const readonly = useReadonly();
860
888
  const output = useOutput();
861
889
  const emoji = [];
@@ -871,22 +899,14 @@ function HighlightBoxView(props) {
871
899
  return () => {
872
900
  const { state, name } = props.component;
873
901
  if (readonly() || output()) {
874
- 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("div", { class: "xnote-highlight-box-icon", children: jsx("button", { type: "button", children: state.type || '❤️' }) }) }), adapter.slotRender(state.slot, children => {
875
- return createVNode('div', {
876
- class: 'xnote-highlight-box-content'
877
- }, children);
878
- }, readonly() || output())] }));
902
+ 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("div", { class: "xnote-highlight-box-icon", children: jsx("button", { type: "button", children: state.type || '❤️' }) }) }), jsx(SlotRender, { slot: state.slot, class: 'xnote-highlight-box-content', renderEnv: readonly() || output() })] }));
879
903
  }
880
904
  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: "282px", menu: jsxs("div", { class: "xnote-highlight-box-icons", children: [jsx("div", { class: "xnote-highlight-box-heading", children: "\u5E38\u7528" }), HighlightBoxComponent.defaultTypes.map(icon => {
881
905
  return (jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
882
906
  }), jsx("div", { class: "xnote-highlight-box-heading", children: "\u66F4\u591A" }), emoji.map(i => {
883
907
  const icon = String.fromCodePoint(i);
884
908
  return (jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
885
- })] }), children: jsx("div", { class: "xnote-highlight-box-icon", children: jsx("button", { type: "button", children: state.type || '❤️' }) }) }) }), adapter.slotRender(state.slot, children => {
886
- return createVNode('div', {
887
- class: 'xnote-highlight-box-content'
888
- }, children);
889
- }, readonly() || output())] }));
909
+ })] }), children: jsx("div", { class: "xnote-highlight-box-icon", children: jsx("button", { type: "button", children: state.type || '❤️' }) }) }) }), jsx(SlotRender, { slot: state.slot, class: 'xnote-highlight-box-content', renderEnv: readonly() || output() })] }));
890
910
  };
891
911
  }
892
912
  const highlightBoxComponentLoader = {
@@ -957,14 +977,11 @@ class ParagraphComponent extends Component {
957
977
  ParagraphComponent.componentName = 'ParagraphComponent';
958
978
  ParagraphComponent.type = ContentType.BlockComponent;
959
979
  function ParagraphView(props) {
960
- const adapter = inject(DomAdapter);
961
980
  const readonly = useReadonly();
962
981
  const output = useOutput();
963
982
  return () => {
964
983
  const slot = props.component.state.slot;
965
- return (jsx("div", { class: "xnote-paragraph", ref: props.rootRef, "data-component": ParagraphComponent.componentName, children: adapter.slotRender(slot, children => {
966
- return (createVNode('div', null, children));
967
- }, readonly() || output()) }));
984
+ return (jsx("div", { class: "xnote-paragraph", ref: props.rootRef, "data-component": ParagraphComponent.componentName, children: jsx(SlotRender, { tag: "div", slot: slot, renderEnv: readonly() || output() }) }));
968
985
  };
969
986
  }
970
987
  const paragraphComponentLoader = {
@@ -2142,7 +2159,6 @@ TodolistComponent.zenCoding = {
2142
2159
  }
2143
2160
  };
2144
2161
  function TodolistView(props) {
2145
- const adapter = inject(DomAdapter);
2146
2162
  const component = props.component;
2147
2163
  const state = component.state;
2148
2164
  function toggle() {
@@ -2171,11 +2187,7 @@ function TodolistView(props) {
2171
2187
  marginLeft: indent * 24 + 'px',
2172
2188
  justifyContent: align[component.state.slot.getAttribute(textAlignAttr)],
2173
2189
  textAlign: component.state.slot.getAttribute(textAlignAttr) === 'justify' ? 'justify' : void 0
2174
- }, children: [jsx("div", { class: "xnote-todolist-icon", onClick: toggle, children: jsx("span", { "data-checked": checked, class: [checked ? 'xnote-icon-checkbox-checked' : 'xnote-icon-checkbox-unchecked'] }) }), adapter.slotRender(slot, children => {
2175
- return createVNode('div', {
2176
- class: 'xnote-todolist-content'
2177
- }, children);
2178
- }, readonly() || output())] }));
2190
+ }, children: [jsx("div", { class: "xnote-todolist-icon", onClick: toggle, children: jsx("span", { "data-checked": checked, class: [checked ? 'xnote-icon-checkbox-checked' : 'xnote-icon-checkbox-unchecked'] }) }), jsx(SlotRender, { slot: slot, tag: 'div', class: 'xnote-todolist-content', renderEnv: readonly() || output() })] }));
2179
2191
  };
2180
2192
  }
2181
2193
  const todolistComponentLoader = {
@@ -2378,7 +2390,6 @@ function numberToLetter(num) {
2378
2390
  }).join('');
2379
2391
  }
2380
2392
  function ListComponentView(props) {
2381
- const adapter = inject(DomAdapter);
2382
2393
  const component = props.component;
2383
2394
  function reorder(is) {
2384
2395
  component.state.reorder = is;
@@ -2452,11 +2463,7 @@ function ListComponentView(props) {
2452
2463
  }, children: [jsx("div", { class: "xnote-list-type", children: (component.state.type === 'UnorderedList' || readonly() || output()) ?
2453
2464
  jsx("span", { class: "xnote-order-btn", children: icon })
2454
2465
  :
2455
- 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 => {
2456
- return createVNode('div', {
2457
- class: 'xnote-list-content'
2458
- }, children);
2459
- }, readonly() || output())] }) }));
2466
+ 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 }) }) }), jsx(SlotRender, { slot: component.state.slot, class: 'xnote-list-content', renderEnv: readonly() || output() })] }) }));
2460
2467
  };
2461
2468
  }
2462
2469
  const listComponentLoader = {
@@ -4652,7 +4659,6 @@ AtComponent.componentName = 'AtComponent';
4652
4659
  AtComponent.type = ContentType.InlineComponent;
4653
4660
 
4654
4661
  function AtComponentView(props) {
4655
- const adapter = inject(DomAdapter);
4656
4662
  const selection = inject(Selection);
4657
4663
  const dropdownRef = createRef();
4658
4664
  const subscription = props.component.focus.subscribe((b) => {
@@ -4693,11 +4699,7 @@ function AtComponentView(props) {
4693
4699
  return (jsxs("div", { class: "xnote-at xnote-at-complete", "data-info": encodeURIComponent(JSON.stringify(userInfo)), ref: props.rootRef, "data-component": props.component.name, children: [jsx("span", { children: "@" }), userInfo.name] }));
4694
4700
  }
4695
4701
  if (readonly() || output()) {
4696
- return (jsxs("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: [jsx("span", { children: "@" }), slot && adapter.slotRender(slot, children => {
4697
- return createVNode('span', {
4698
- class: 'xnote-at-input'
4699
- }, children);
4700
- })] }));
4702
+ return (jsxs("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: [jsx("span", { children: "@" }), slot && jsx(SlotRender, { slot: slot, class: 'xnote-at-input', tag: "span" })] }));
4701
4703
  }
4702
4704
  const members = props.component.members();
4703
4705
  return (jsx("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: jsxs(Dropdown, { trigger: 'none', ref: dropdownRef, menu: jsx("div", { class: "xnote-at-menu", ref: membersRef, children: members.map((member, index) => {
@@ -4713,11 +4715,7 @@ function AtComponentView(props) {
4713
4715
  selection.selectComponentEnd(props.component);
4714
4716
  }, class: ['xnote-at-member', { selected: index === selectedIndex }], children: [jsx("div", { class: "xnote-at-member-avatar", children: member.avatar ? jsx("img", { src: member.avatar, alt: member.name }) :
4715
4717
  jsx("span", { class: "xnote-at-member-avatar-bg", style: { background: member.color, color }, children: member.name }) }), jsxs("div", { class: "xnote-at-member-info", children: [jsx("div", { class: "xnote-at-member-name", children: member.name }), jsx("div", { class: "xnote-at-member-desc", children: member.groupName })] })] }, member.id));
4716
- }) }), children: [jsx("span", { children: "@" }), slot && adapter.slotRender(slot, children => {
4717
- return createVNode('span', {
4718
- class: 'xnote-at-input'
4719
- }, children);
4720
- })] }) }));
4718
+ }) }), children: [jsx("span", { children: "@" }), slot && jsx(SlotRender, { slot: slot, tag: 'span', class: 'xnote-at-input' })] }) }));
4721
4719
  };
4722
4720
  }
4723
4721
  const atComponentLoader = {
@@ -4779,7 +4777,6 @@ class RootComponent extends Component {
4779
4777
  RootComponent.componentName = 'RootComponent';
4780
4778
  RootComponent.type = ContentType.BlockComponent;
4781
4779
  function RootView(props) {
4782
- const adapter = inject(DomAdapter);
4783
4780
  const { content } = props.component.state;
4784
4781
  const ref = createDynamicRef(node => {
4785
4782
  const sub = props.component.onCompositionStart.subscribe(() => {
@@ -4796,12 +4793,7 @@ function RootView(props) {
4796
4793
  const output = useOutput();
4797
4794
  return () => {
4798
4795
  const { rootRef } = props;
4799
- return (jsx("div", { class: "xnote-root", dir: "auto", ref: [rootRef, ref], "data-component": props.component.name, children: adapter.slotRender(content, children => {
4800
- return (createVNode('div', {
4801
- class: 'xnote-content',
4802
- 'data-placeholder': content.isEmpty ? '请输入内容' : ''
4803
- }, children));
4804
- }, readonly() || output()) }));
4796
+ return (jsx("div", { class: "xnote-root", dir: "auto", ref: [rootRef, ref], "data-component": props.component.name, children: jsx(SlotRender, { slot: content, tag: "div", class: "xnote-content", "data-placeholder": content.isEmpty ? '请输入内容' : '', renderEnv: readonly() || output() }) }));
4805
4797
  };
4806
4798
  }
4807
4799
  const rootComponentLoader = {
@@ -5320,6 +5312,7 @@ function SelectionMask(props) {
5320
5312
  });
5321
5313
  }
5322
5314
 
5315
+ // import { SlotRender } from '../SlotRender'
5323
5316
  const TableComponentView = withAnnotation({
5324
5317
  providers: [TableService]
5325
5318
  }, function TableComponentView(props) {
@@ -5368,7 +5361,7 @@ const TableComponentView = withAnnotation({
5368
5361
  }) }, rowMapping.get(row)));
5369
5362
  }) })] }) }) }) }));
5370
5363
  }
5371
- return (jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": state.layoutWidth, children: jsxs("div", { class: "xnote-table-inner", ref: props.rootRef, children: [jsx(TopBar, { isFocus: isFocus, layoutWidth: layoutWidth, component: props.component }), jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsx(Scroll, { isFocus: isFocus, children: jsxs("div", { class: "xnote-table-container", children: [jsxs("table", { ref: tableRef, class: [
5364
+ return (jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": `[${state.layoutWidth.join(',')}]`, children: jsxs("div", { class: "xnote-table-inner", ref: props.rootRef, children: [jsx(TopBar, { isFocus: isFocus, layoutWidth: layoutWidth, component: props.component }), jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsx(Scroll, { isFocus: isFocus, children: jsxs("div", { class: "xnote-table-container", children: [jsxs("table", { ref: tableRef, class: [
5372
5365
  'xnote-table-content',
5373
5366
  {
5374
5367
  'hide-selection': props.component.tableSelection()
@@ -5393,10 +5386,11 @@ const tableComponentLoader = {
5393
5386
  return element.dataset.component === TableComponent.componentName || element.tagName === 'TABLE';
5394
5387
  },
5395
5388
  read(element, textbus, slotParser) {
5389
+ let content = element;
5396
5390
  if (element.tagName === 'DIV') {
5397
- element = element.querySelector('.xnote-table-content');
5391
+ content = element.querySelector('.xnote-table-content');
5398
5392
  }
5399
- const { tHead, tBodies, tFoot } = element;
5393
+ const { tHead, tBodies, tFoot } = content;
5400
5394
  const headers = [];
5401
5395
  const bodies = [];
5402
5396
  if (tHead) {
package/bundles/index.js CHANGED
@@ -32,6 +32,18 @@ PERFORMANCE OF THIS SOFTWARE.
32
32
  /* global Reflect, Promise, SuppressedError, Symbol */
33
33
 
34
34
 
35
+ function __rest(s, e) {
36
+ var t = {};
37
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
38
+ t[p] = s[p];
39
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
40
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
41
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
42
+ t[p[i]] = s[p[i]];
43
+ }
44
+ return t;
45
+ }
46
+
35
47
  function __decorate(decorators, target, key, desc) {
36
48
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
37
49
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -703,6 +715,26 @@ function useBlockContent(slot) {
703
715
  });
704
716
  }
705
717
 
718
+ function SlotRender(props) {
719
+ const adapter = core.inject(platformBrowser.DomAdapter);
720
+ const instance = core.getCurrentInstance();
721
+ const slot = props.slot;
722
+ const sub = core$1.merge(slot.__changeMarker__.onChange, slot.__changeMarker__.onForceChange).subscribe(() => {
723
+ if (props.slot.__changeMarker__.dirty) {
724
+ instance.markAsDirtied();
725
+ }
726
+ });
727
+ core.onUnmounted(() => {
728
+ sub.unsubscribe();
729
+ });
730
+ return () => {
731
+ const { slot, tag = 'div', renderEnv = false, elRef, elKey } = props, rest = __rest(props, ["slot", "tag", "renderEnv", "elRef", "elKey"]);
732
+ return adapter.slotRender(slot, children => {
733
+ return core$1.createVNode(tag, Object.assign({ ref: elRef, key: elKey }, rest), children);
734
+ }, renderEnv);
735
+ };
736
+ }
737
+
706
738
  class BlockquoteComponent extends core$1.Component {
707
739
  static fromJSON(textbus, json) {
708
740
  const slot = textbus.get(core$1.Registry).createSlot(json.slot);
@@ -799,14 +831,11 @@ function registerBlockquoteShortcut(textbus) {
799
831
  });
800
832
  }
801
833
  function BlockquoteView(props) {
802
- const adapter = core.inject(platformBrowser.DomAdapter);
803
834
  const readonly = useReadonly();
804
835
  const output = useOutput();
805
836
  return () => {
806
837
  const slot = props.component.state.slot;
807
- return (jsxRuntime.jsx("blockquote", { class: "xnote-blockquote", ref: props.rootRef, "data-component": props.component.name, children: adapter.slotRender(slot, children => {
808
- return core$1.createVNode('div', null, children);
809
- }, readonly() || output()) }));
838
+ return (jsxRuntime.jsx("blockquote", { class: "xnote-blockquote", ref: props.rootRef, "data-component": props.component.name, children: jsxRuntime.jsx(SlotRender, { slot: slot, renderEnv: readonly() || output() }) }));
810
839
  };
811
840
  }
812
841
  const blockquoteComponentLoader = {
@@ -857,7 +886,6 @@ HighlightBoxComponent.defaultTypes = ['❤️', '💡', '📌', '✅', '❎', '
857
886
  HighlightBoxComponent.componentName = 'HighlightBoxComponent';
858
887
  HighlightBoxComponent.type = core$1.ContentType.BlockComponent;
859
888
  function HighlightBoxView(props) {
860
- const adapter = core.inject(platformBrowser.DomAdapter);
861
889
  const readonly = useReadonly();
862
890
  const output = useOutput();
863
891
  const emoji = [];
@@ -873,22 +901,14 @@ function HighlightBoxView(props) {
873
901
  return () => {
874
902
  const { state, name } = props.component;
875
903
  if (readonly() || output()) {
876
- return (jsxRuntime.jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-left", children: jsxRuntime.jsx("div", { class: "xnote-highlight-box-icon", children: jsxRuntime.jsx("button", { type: "button", children: state.type || '❤️' }) }) }), adapter.slotRender(state.slot, children => {
877
- return core$1.createVNode('div', {
878
- class: 'xnote-highlight-box-content'
879
- }, children);
880
- }, readonly() || output())] }));
904
+ return (jsxRuntime.jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-left", children: jsxRuntime.jsx("div", { class: "xnote-highlight-box-icon", children: jsxRuntime.jsx("button", { type: "button", children: state.type || '❤️' }) }) }), jsxRuntime.jsx(SlotRender, { slot: state.slot, class: 'xnote-highlight-box-content', renderEnv: readonly() || output() })] }));
881
905
  }
882
906
  return (jsxRuntime.jsxs("div", { "data-component": name, ref: props.rootRef, "data-icon": state.type, class: "xnote-highlight-box", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-left", children: jsxRuntime.jsx(Dropdown, { trigger: "click", ref: dropdownRef, width: "282px", menu: jsxRuntime.jsxs("div", { class: "xnote-highlight-box-icons", children: [jsxRuntime.jsx("div", { class: "xnote-highlight-box-heading", children: "\u5E38\u7528" }), HighlightBoxComponent.defaultTypes.map(icon => {
883
907
  return (jsxRuntime.jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
884
908
  }), jsxRuntime.jsx("div", { class: "xnote-highlight-box-heading", children: "\u66F4\u591A" }), emoji.map(i => {
885
909
  const icon = String.fromCodePoint(i);
886
910
  return (jsxRuntime.jsx("button", { onClick: () => setType(icon), type: "button", children: icon }));
887
- })] }), children: jsxRuntime.jsx("div", { class: "xnote-highlight-box-icon", children: jsxRuntime.jsx("button", { type: "button", children: state.type || '❤️' }) }) }) }), adapter.slotRender(state.slot, children => {
888
- return core$1.createVNode('div', {
889
- class: 'xnote-highlight-box-content'
890
- }, children);
891
- }, readonly() || output())] }));
911
+ })] }), children: jsxRuntime.jsx("div", { class: "xnote-highlight-box-icon", children: jsxRuntime.jsx("button", { type: "button", children: state.type || '❤️' }) }) }) }), jsxRuntime.jsx(SlotRender, { slot: state.slot, class: 'xnote-highlight-box-content', renderEnv: readonly() || output() })] }));
892
912
  };
893
913
  }
894
914
  const highlightBoxComponentLoader = {
@@ -959,14 +979,11 @@ class ParagraphComponent extends core$1.Component {
959
979
  ParagraphComponent.componentName = 'ParagraphComponent';
960
980
  ParagraphComponent.type = core$1.ContentType.BlockComponent;
961
981
  function ParagraphView(props) {
962
- const adapter = core.inject(platformBrowser.DomAdapter);
963
982
  const readonly = useReadonly();
964
983
  const output = useOutput();
965
984
  return () => {
966
985
  const slot = props.component.state.slot;
967
- return (jsxRuntime.jsx("div", { class: "xnote-paragraph", ref: props.rootRef, "data-component": ParagraphComponent.componentName, children: adapter.slotRender(slot, children => {
968
- return (core$1.createVNode('div', null, children));
969
- }, readonly() || output()) }));
986
+ return (jsxRuntime.jsx("div", { class: "xnote-paragraph", ref: props.rootRef, "data-component": ParagraphComponent.componentName, children: jsxRuntime.jsx(SlotRender, { tag: "div", slot: slot, renderEnv: readonly() || output() }) }));
970
987
  };
971
988
  }
972
989
  const paragraphComponentLoader = {
@@ -2144,7 +2161,6 @@ TodolistComponent.zenCoding = {
2144
2161
  }
2145
2162
  };
2146
2163
  function TodolistView(props) {
2147
- const adapter = core.inject(platformBrowser.DomAdapter);
2148
2164
  const component = props.component;
2149
2165
  const state = component.state;
2150
2166
  function toggle() {
@@ -2173,11 +2189,7 @@ function TodolistView(props) {
2173
2189
  marginLeft: indent * 24 + 'px',
2174
2190
  justifyContent: align[component.state.slot.getAttribute(textAlignAttr)],
2175
2191
  textAlign: component.state.slot.getAttribute(textAlignAttr) === 'justify' ? 'justify' : void 0
2176
- }, children: [jsxRuntime.jsx("div", { class: "xnote-todolist-icon", onClick: toggle, children: jsxRuntime.jsx("span", { "data-checked": checked, class: [checked ? 'xnote-icon-checkbox-checked' : 'xnote-icon-checkbox-unchecked'] }) }), adapter.slotRender(slot, children => {
2177
- return core$1.createVNode('div', {
2178
- class: 'xnote-todolist-content'
2179
- }, children);
2180
- }, readonly() || output())] }));
2192
+ }, children: [jsxRuntime.jsx("div", { class: "xnote-todolist-icon", onClick: toggle, children: jsxRuntime.jsx("span", { "data-checked": checked, class: [checked ? 'xnote-icon-checkbox-checked' : 'xnote-icon-checkbox-unchecked'] }) }), jsxRuntime.jsx(SlotRender, { slot: slot, tag: 'div', class: 'xnote-todolist-content', renderEnv: readonly() || output() })] }));
2181
2193
  };
2182
2194
  }
2183
2195
  const todolistComponentLoader = {
@@ -2380,7 +2392,6 @@ function numberToLetter(num) {
2380
2392
  }).join('');
2381
2393
  }
2382
2394
  function ListComponentView(props) {
2383
- const adapter = core.inject(platformBrowser.DomAdapter);
2384
2395
  const component = props.component;
2385
2396
  function reorder(is) {
2386
2397
  component.state.reorder = is;
@@ -2454,11 +2465,7 @@ function ListComponentView(props) {
2454
2465
  }, children: [jsxRuntime.jsx("div", { class: "xnote-list-type", children: (component.state.type === 'UnorderedList' || readonly() || output()) ?
2455
2466
  jsxRuntime.jsx("span", { class: "xnote-order-btn", children: icon })
2456
2467
  :
2457
- jsxRuntime.jsx(Dropdown, { menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem, { onClick: () => reorder(false), children: "\u7EE7\u7EED\u7F16\u53F7" }), jsxRuntime.jsx(MenuItem, { onClick: () => reorder(true), children: "\u91CD\u65B0\u7F16\u53F7" })] }), children: jsxRuntime.jsx(Button, { style: { color: 'inherit' }, children: icon }) }) }), adapter.slotRender(component.state.slot, children => {
2458
- return core$1.createVNode('div', {
2459
- class: 'xnote-list-content'
2460
- }, children);
2461
- }, readonly() || output())] }) }));
2468
+ jsxRuntime.jsx(Dropdown, { menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem, { onClick: () => reorder(false), children: "\u7EE7\u7EED\u7F16\u53F7" }), jsxRuntime.jsx(MenuItem, { onClick: () => reorder(true), children: "\u91CD\u65B0\u7F16\u53F7" })] }), children: jsxRuntime.jsx(Button, { style: { color: 'inherit' }, children: icon }) }) }), jsxRuntime.jsx(SlotRender, { slot: component.state.slot, class: 'xnote-list-content', renderEnv: readonly() || output() })] }) }));
2462
2469
  };
2463
2470
  }
2464
2471
  const listComponentLoader = {
@@ -4654,7 +4661,6 @@ AtComponent.componentName = 'AtComponent';
4654
4661
  AtComponent.type = core$1.ContentType.InlineComponent;
4655
4662
 
4656
4663
  function AtComponentView(props) {
4657
- const adapter = core.inject(platformBrowser.DomAdapter);
4658
4664
  const selection = core.inject(core$1.Selection);
4659
4665
  const dropdownRef = core.createRef();
4660
4666
  const subscription = props.component.focus.subscribe((b) => {
@@ -4695,11 +4701,7 @@ function AtComponentView(props) {
4695
4701
  return (jsxRuntime.jsxs("div", { class: "xnote-at xnote-at-complete", "data-info": encodeURIComponent(JSON.stringify(userInfo)), ref: props.rootRef, "data-component": props.component.name, children: [jsxRuntime.jsx("span", { children: "@" }), userInfo.name] }));
4696
4702
  }
4697
4703
  if (readonly() || output()) {
4698
- return (jsxRuntime.jsxs("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: [jsxRuntime.jsx("span", { children: "@" }), slot && adapter.slotRender(slot, children => {
4699
- return core$1.createVNode('span', {
4700
- class: 'xnote-at-input'
4701
- }, children);
4702
- })] }));
4704
+ return (jsxRuntime.jsxs("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: [jsxRuntime.jsx("span", { children: "@" }), slot && jsxRuntime.jsx(SlotRender, { slot: slot, class: 'xnote-at-input', tag: "span" })] }));
4703
4705
  }
4704
4706
  const members = props.component.members();
4705
4707
  return (jsxRuntime.jsx("div", { class: "xnote-at", ref: props.rootRef, "data-component": props.component.name, children: jsxRuntime.jsxs(Dropdown, { trigger: 'none', ref: dropdownRef, menu: jsxRuntime.jsx("div", { class: "xnote-at-menu", ref: membersRef, children: members.map((member, index) => {
@@ -4715,11 +4717,7 @@ function AtComponentView(props) {
4715
4717
  selection.selectComponentEnd(props.component);
4716
4718
  }, class: ['xnote-at-member', { selected: index === selectedIndex }], children: [jsxRuntime.jsx("div", { class: "xnote-at-member-avatar", children: member.avatar ? jsxRuntime.jsx("img", { src: member.avatar, alt: member.name }) :
4717
4719
  jsxRuntime.jsx("span", { class: "xnote-at-member-avatar-bg", style: { background: member.color, color: color$1 }, children: member.name }) }), jsxRuntime.jsxs("div", { class: "xnote-at-member-info", children: [jsxRuntime.jsx("div", { class: "xnote-at-member-name", children: member.name }), jsxRuntime.jsx("div", { class: "xnote-at-member-desc", children: member.groupName })] })] }, member.id));
4718
- }) }), children: [jsxRuntime.jsx("span", { children: "@" }), slot && adapter.slotRender(slot, children => {
4719
- return core$1.createVNode('span', {
4720
- class: 'xnote-at-input'
4721
- }, children);
4722
- })] }) }));
4720
+ }) }), children: [jsxRuntime.jsx("span", { children: "@" }), slot && jsxRuntime.jsx(SlotRender, { slot: slot, tag: 'span', class: 'xnote-at-input' })] }) }));
4723
4721
  };
4724
4722
  }
4725
4723
  const atComponentLoader = {
@@ -4781,7 +4779,6 @@ class RootComponent extends core$1.Component {
4781
4779
  RootComponent.componentName = 'RootComponent';
4782
4780
  RootComponent.type = core$1.ContentType.BlockComponent;
4783
4781
  function RootView(props) {
4784
- const adapter = core.inject(platformBrowser.DomAdapter);
4785
4782
  const { content } = props.component.state;
4786
4783
  const ref = core.createDynamicRef(node => {
4787
4784
  const sub = props.component.onCompositionStart.subscribe(() => {
@@ -4798,12 +4795,7 @@ function RootView(props) {
4798
4795
  const output = useOutput();
4799
4796
  return () => {
4800
4797
  const { rootRef } = props;
4801
- return (jsxRuntime.jsx("div", { class: "xnote-root", dir: "auto", ref: [rootRef, ref], "data-component": props.component.name, children: adapter.slotRender(content, children => {
4802
- return (core$1.createVNode('div', {
4803
- class: 'xnote-content',
4804
- 'data-placeholder': content.isEmpty ? '请输入内容' : ''
4805
- }, children));
4806
- }, readonly() || output()) }));
4798
+ return (jsxRuntime.jsx("div", { class: "xnote-root", dir: "auto", ref: [rootRef, ref], "data-component": props.component.name, children: jsxRuntime.jsx(SlotRender, { slot: content, tag: "div", class: "xnote-content", "data-placeholder": content.isEmpty ? '请输入内容' : '', renderEnv: readonly() || output() }) }));
4807
4799
  };
4808
4800
  }
4809
4801
  const rootComponentLoader = {
@@ -5322,6 +5314,7 @@ function SelectionMask(props) {
5322
5314
  });
5323
5315
  }
5324
5316
 
5317
+ // import { SlotRender } from '../SlotRender'
5325
5318
  const TableComponentView = core.withAnnotation({
5326
5319
  providers: [TableService]
5327
5320
  }, function TableComponentView(props) {
@@ -5370,7 +5363,7 @@ const TableComponentView = core.withAnnotation({
5370
5363
  }) }, rowMapping.get(row)));
5371
5364
  }) })] }) }) }) }));
5372
5365
  }
5373
- return (jsxRuntime.jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": state.layoutWidth, children: jsxRuntime.jsxs("div", { class: "xnote-table-inner", ref: props.rootRef, children: [jsxRuntime.jsx(TopBar, { isFocus: isFocus, layoutWidth: layoutWidth, component: props.component }), jsxRuntime.jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsxRuntime.jsx(Scroll, { isFocus: isFocus, children: jsxRuntime.jsxs("div", { class: "xnote-table-container", children: [jsxRuntime.jsxs("table", { ref: tableRef, class: [
5366
+ return (jsxRuntime.jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": `[${state.layoutWidth.join(',')}]`, children: jsxRuntime.jsxs("div", { class: "xnote-table-inner", ref: props.rootRef, children: [jsxRuntime.jsx(TopBar, { isFocus: isFocus, layoutWidth: layoutWidth, component: props.component }), jsxRuntime.jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsxRuntime.jsx(Scroll, { isFocus: isFocus, children: jsxRuntime.jsxs("div", { class: "xnote-table-container", children: [jsxRuntime.jsxs("table", { ref: tableRef, class: [
5374
5367
  'xnote-table-content',
5375
5368
  {
5376
5369
  'hide-selection': props.component.tableSelection()
@@ -5395,10 +5388,11 @@ const tableComponentLoader = {
5395
5388
  return element.dataset.component === TableComponent.componentName || element.tagName === 'TABLE';
5396
5389
  },
5397
5390
  read(element, textbus, slotParser) {
5391
+ let content = element;
5398
5392
  if (element.tagName === 'DIV') {
5399
- element = element.querySelector('.xnote-table-content');
5393
+ content = element.querySelector('.xnote-table-content');
5400
5394
  }
5401
- const { tHead, tBodies, tFoot } = element;
5395
+ const { tHead, tBodies, tFoot } = content;
5402
5396
  const headers = [];
5403
5397
  const bodies = [];
5404
5398
  if (tHead) {
package/bundles/textbus/components/SlotRender.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { Slot } from '@textbus/core';
2
+ import { DynamicRef } from '@viewfly/core';
3
+ import { HTMLAttributes } from '@viewfly/platform-browser';
4
+ interface Props extends HTMLAttributes<unknown> {
5
+ slot: Slot;
6
+ /** 默认值为 div */
7
+ tag?: string;
8
+ class?: string;
9
+ renderEnv?: boolean;
10
+ elRef?: DynamicRef<HTMLElement>;
11
+ elKey?: number | string;
12
+ }
13
+ export declare function SlotRender(props: Props): () => any;
14
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@textbus/xnote",
3
- "version": "0.0.1-alpha.46",
3
+ "version": "0.0.1-alpha.47",
4
4
  "description": "A high-performance rich text editor that supports multiplayer online collaboration.",
5
5
  "main": "./bundles/index.js",
6
6
  "module": "./bundles/index.esm.js",
@@ -27,14 +27,14 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@tanbo/color": "^0.1.1",
30
- "@textbus/adapter-viewfly": "^4.0.0-alpha.71",
31
- "@textbus/collaborate": "^4.0.0-alpha.71",
32
- "@textbus/core": "^4.0.0-alpha.71",
33
- "@textbus/platform-browser": "^4.0.0-alpha.71",
34
- "@viewfly/core": "^1.0.0-alpha.17",
35
- "@viewfly/hooks": "^1.0.0-alpha.17",
36
- "@viewfly/platform-browser": "^1.0.0-alpha.17",
37
- "@viewfly/scoped-css": "^1.0.0-alpha.17",
30
+ "@textbus/adapter-viewfly": "^4.0.0-alpha.72",
31
+ "@textbus/collaborate": "^4.0.0-alpha.72",
32
+ "@textbus/core": "^4.0.0-alpha.72",
33
+ "@textbus/platform-browser": "^4.0.0-alpha.72",
34
+ "@viewfly/core": "^1.0.0-alpha.18",
35
+ "@viewfly/hooks": "^1.0.0-alpha.18",
36
+ "@viewfly/platform-browser": "^1.0.0-alpha.18",
37
+ "@viewfly/scoped-css": "^1.0.0-alpha.18",
38
38
  "highlight.js": "^11.9.0",
39
39
  "katex": "^0.16.10"
40
40
  },