@dxos/react-ui-editor 0.8.2-staging.42af850 → 0.8.2-staging.4d6ad0f
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.
- package/dist/lib/browser/index.mjs +77 -139
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +36 -105
- package/dist/lib/node/index.cjs.map +4 -4
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +77 -139
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/extensions/command/menu.d.ts +10 -1
- package/dist/types/src/extensions/command/menu.d.ts.map +1 -1
- package/dist/types/src/extensions/outliner/commands.d.ts +0 -1
- package/dist/types/src/extensions/outliner/commands.d.ts.map +1 -1
- package/dist/types/src/extensions/outliner/editor.d.ts.map +1 -1
- package/dist/types/src/extensions/outliner/index.d.ts +0 -1
- package/dist/types/src/extensions/outliner/index.d.ts.map +1 -1
- package/dist/types/src/extensions/outliner/outliner.d.ts +1 -4
- package/dist/types/src/extensions/outliner/outliner.d.ts.map +1 -1
- package/package.json +27 -27
- package/src/extensions/command/menu.ts +4 -35
- package/src/extensions/outliner/commands.ts +1 -29
- package/src/extensions/outliner/editor.ts +3 -7
- package/src/extensions/outliner/index.ts +0 -1
- package/src/extensions/outliner/outliner.test.ts +2 -2
- package/src/extensions/outliner/outliner.ts +37 -43
@@ -35,7 +35,7 @@ var translations_default = [
|
|
35
35
|
|
36
36
|
// packages/ui/react-ui-editor/src/index.ts
|
37
37
|
import { EditorState as EditorState4 } from "@codemirror/state";
|
38
|
-
import { EditorView as
|
38
|
+
import { EditorView as EditorView23, keymap as keymap13 } from "@codemirror/view";
|
39
39
|
import { tags as tags2 } from "@lezer/highlight";
|
40
40
|
import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
|
41
41
|
|
@@ -1458,7 +1458,7 @@ var command = (options = {}) => {
|
|
1458
1458
|
};
|
1459
1459
|
|
1460
1460
|
// packages/ui/react-ui-editor/src/extensions/command/menu.ts
|
1461
|
-
import {
|
1461
|
+
import { ViewPlugin as ViewPlugin5 } from "@codemirror/view";
|
1462
1462
|
var floatingMenu = (options = {}) => [
|
1463
1463
|
ViewPlugin5.fromClass(class {
|
1464
1464
|
constructor(view) {
|
@@ -1472,24 +1472,20 @@ var floatingMenu = (options = {}) => [
|
|
1472
1472
|
icon.setAttribute("icon", options.icon ?? "ph--dots-three-outline--regular");
|
1473
1473
|
const button = document.createElement("button");
|
1474
1474
|
button.appendChild(icon);
|
1475
|
+
button.classList.add("grid", "items-center", "justify-center", "w-8", "h-8");
|
1475
1476
|
this.tag = document.createElement("dx-ref-tag");
|
1476
|
-
this.tag.classList.add("
|
1477
|
+
this.tag.classList.add("border-none", "fixed", "p-0");
|
1477
1478
|
this.tag.appendChild(button);
|
1478
1479
|
container.appendChild(this.tag);
|
1479
1480
|
container.addEventListener("scroll", this.scheduleUpdate.bind(this));
|
1480
1481
|
this.scheduleUpdate();
|
1481
1482
|
}
|
1482
1483
|
update(update2) {
|
1483
|
-
this.tag.dataset.focused = update2.view.hasFocus ? "true" : "false";
|
1484
|
-
if (!update2.view.hasFocus) {
|
1485
|
-
return;
|
1486
|
-
}
|
1487
1484
|
if (update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(openEffect)))) {
|
1488
1485
|
this.tag.style.display = "none";
|
1489
|
-
this.tag.classList.add("opacity-10");
|
1490
1486
|
} else if (update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(closeEffect)))) {
|
1491
1487
|
this.tag.style.display = "block";
|
1492
|
-
} else if (update2.
|
1488
|
+
} else if (update2.selectionSet || update2.viewportChanged || update2.docChanged || update2.geometryChanged) {
|
1493
1489
|
this.scheduleUpdate();
|
1494
1490
|
}
|
1495
1491
|
}
|
@@ -1521,25 +1517,6 @@ var floatingMenu = (options = {}) => [
|
|
1521
1517
|
cancelAnimationFrame(this.rafId);
|
1522
1518
|
}
|
1523
1519
|
}
|
1524
|
-
}),
|
1525
|
-
EditorView7.theme({
|
1526
|
-
".cm-ref-tag": {
|
1527
|
-
position: "fixed",
|
1528
|
-
padding: "0",
|
1529
|
-
border: "none",
|
1530
|
-
transition: "opacity 0.3s ease-in-out",
|
1531
|
-
opacity: 0.1
|
1532
|
-
},
|
1533
|
-
".cm-ref-tag button": {
|
1534
|
-
display: "grid",
|
1535
|
-
alignItems: "center",
|
1536
|
-
justifyContent: "center",
|
1537
|
-
width: "2rem",
|
1538
|
-
height: "2rem"
|
1539
|
-
},
|
1540
|
-
'.cm-ref-tag[data-focused="true"]': {
|
1541
|
-
opacity: 1
|
1542
|
-
}
|
1543
1520
|
})
|
1544
1521
|
];
|
1545
1522
|
|
@@ -1629,7 +1606,7 @@ var matchCompletion = (completion, word) => {
|
|
1629
1606
|
// packages/ui/react-ui-editor/src/extensions/comments.ts
|
1630
1607
|
import { invertedEffects } from "@codemirror/commands";
|
1631
1608
|
import { StateEffect as StateEffect3, StateField as StateField3 } from "@codemirror/state";
|
1632
|
-
import { hoverTooltip, keymap as keymap6, Decoration as Decoration5, EditorView as
|
1609
|
+
import { hoverTooltip, keymap as keymap6, Decoration as Decoration5, EditorView as EditorView8, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
|
1633
1610
|
import sortBy from "lodash.sortby";
|
1634
1611
|
import { useEffect } from "react";
|
1635
1612
|
import { debounce as debounce2 } from "@dxos/async";
|
@@ -1638,7 +1615,7 @@ import { isNonNullable } from "@dxos/util";
|
|
1638
1615
|
|
1639
1616
|
// packages/ui/react-ui-editor/src/extensions/selection.ts
|
1640
1617
|
import { Transaction } from "@codemirror/state";
|
1641
|
-
import { EditorView as
|
1618
|
+
import { EditorView as EditorView7, keymap as keymap5 } from "@codemirror/view";
|
1642
1619
|
import { debounce } from "@dxos/async";
|
1643
1620
|
import { invariant as invariant3 } from "@dxos/invariant";
|
1644
1621
|
import { isNotFalsy } from "@dxos/util";
|
@@ -1649,7 +1626,7 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
|
|
1649
1626
|
return {
|
1650
1627
|
selection,
|
1651
1628
|
scrollIntoView: !scrollTo,
|
1652
|
-
effects: scrollTo ?
|
1629
|
+
effects: scrollTo ? EditorView7.scrollIntoView(scrollTo, {
|
1653
1630
|
yMargin: 96
|
1654
1631
|
}) : void 0,
|
1655
1632
|
annotations: Transaction.userEvent.of(stateRestoreAnnotation)
|
@@ -1691,7 +1668,7 @@ var selectionState = ({ getState, setState } = {}) => {
|
|
1691
1668
|
// setStateDebounced(id, {});
|
1692
1669
|
// },
|
1693
1670
|
// }),
|
1694
|
-
|
1671
|
+
EditorView7.updateListener.of(({ view, transactions }) => {
|
1695
1672
|
const id = view.state.facet(documentId);
|
1696
1673
|
if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
|
1697
1674
|
return;
|
@@ -1772,7 +1749,7 @@ var commentsState = StateField3.define({
|
|
1772
1749
|
return value;
|
1773
1750
|
}
|
1774
1751
|
});
|
1775
|
-
var styles2 =
|
1752
|
+
var styles2 = EditorView8.theme({
|
1776
1753
|
".cm-comment, .cm-comment-current": {
|
1777
1754
|
margin: "0 -3px",
|
1778
1755
|
padding: "3px",
|
@@ -1792,7 +1769,7 @@ var createCommentMark = (id, isCurrent) => Decoration5.mark({
|
|
1792
1769
|
"data-comment-id": id
|
1793
1770
|
}
|
1794
1771
|
});
|
1795
|
-
var commentsDecorations =
|
1772
|
+
var commentsDecorations = EditorView8.decorations.compute([
|
1796
1773
|
commentsState
|
1797
1774
|
], (state) => {
|
1798
1775
|
const { selection: { current }, comments: comments2 } = state.field(commentsState);
|
@@ -1815,7 +1792,7 @@ var commentsDecorations = EditorView9.decorations.compute([
|
|
1815
1792
|
return Decoration5.set(decorations2);
|
1816
1793
|
});
|
1817
1794
|
var commentClickedEffect = StateEffect3.define();
|
1818
|
-
var handleCommentClick =
|
1795
|
+
var handleCommentClick = EditorView8.domEventHandlers({
|
1819
1796
|
click: (event, view) => {
|
1820
1797
|
let target = event.target;
|
1821
1798
|
const editorRoot = view.dom;
|
@@ -1854,7 +1831,7 @@ var trackPastedComments = (onUpdate) => {
|
|
1854
1831
|
}
|
1855
1832
|
};
|
1856
1833
|
return [
|
1857
|
-
|
1834
|
+
EditorView8.domEventHandlers({
|
1858
1835
|
cut: handleTrack,
|
1859
1836
|
copy: handleTrack
|
1860
1837
|
}),
|
@@ -1876,7 +1853,7 @@ var trackPastedComments = (onUpdate) => {
|
|
1876
1853
|
return effects;
|
1877
1854
|
}),
|
1878
1855
|
// Handle paste or the undo of comment deletion.
|
1879
|
-
|
1856
|
+
EditorView8.updateListener.of((update2) => {
|
1880
1857
|
const restore = [];
|
1881
1858
|
for (let i = 0; i < update2.transactions.length; i++) {
|
1882
1859
|
const tr = update2.transactions[i];
|
@@ -2018,7 +1995,7 @@ var comments = (options = {}) => {
|
|
2018
1995
|
//
|
2019
1996
|
// Track deleted ranges and update ranges for decorations.
|
2020
1997
|
//
|
2021
|
-
|
1998
|
+
EditorView8.updateListener.of(({ view, state, changes }) => {
|
2022
1999
|
let mod = false;
|
2023
2000
|
const { comments: comments2, ...value } = state.field(commentsState);
|
2024
2001
|
changes.iterChanges((from, to, from2, to2) => {
|
@@ -2050,7 +2027,7 @@ var comments = (options = {}) => {
|
|
2050
2027
|
//
|
2051
2028
|
// Track selection/proximity.
|
2052
2029
|
//
|
2053
|
-
|
2030
|
+
EditorView8.updateListener.of(({ view, state }) => {
|
2054
2031
|
let min = Infinity;
|
2055
2032
|
const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
|
2056
2033
|
const { head } = state.selection.main;
|
@@ -2104,7 +2081,7 @@ var scrollThreadIntoView = (view, id, center = true) => {
|
|
2104
2081
|
anchor: range.from
|
2105
2082
|
} : void 0,
|
2106
2083
|
effects: [
|
2107
|
-
needsScroll ?
|
2084
|
+
needsScroll ? EditorView8.scrollIntoView(range.from, center ? {
|
2108
2085
|
y: "center"
|
2109
2086
|
} : void 0) : [],
|
2110
2087
|
needsSelectionUpdate ? setSelection.of({
|
@@ -2168,8 +2145,8 @@ var debugNodeLogger = (log9 = console.log) => {
|
|
2168
2145
|
};
|
2169
2146
|
|
2170
2147
|
// packages/ui/react-ui-editor/src/extensions/dnd.ts
|
2171
|
-
import { dropCursor, EditorView as
|
2172
|
-
var styles3 =
|
2148
|
+
import { dropCursor, EditorView as EditorView9 } from "@codemirror/view";
|
2149
|
+
var styles3 = EditorView9.theme({
|
2173
2150
|
".cm-dropCursor": {
|
2174
2151
|
borderLeft: "2px solid var(--dx-accentText)",
|
2175
2152
|
color: "var(--dx-accentText)",
|
@@ -2183,7 +2160,7 @@ var dropFile = (options = {}) => {
|
|
2183
2160
|
return [
|
2184
2161
|
styles3,
|
2185
2162
|
dropCursor(),
|
2186
|
-
|
2163
|
+
EditorView9.domEventHandlers({
|
2187
2164
|
drop: (event, view) => {
|
2188
2165
|
event.preventDefault();
|
2189
2166
|
const files = event.dataTransfer?.files;
|
@@ -2210,7 +2187,7 @@ import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@cod
|
|
2210
2187
|
import { searchKeymap } from "@codemirror/search";
|
2211
2188
|
import { EditorState } from "@codemirror/state";
|
2212
2189
|
import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
|
2213
|
-
import { EditorView as
|
2190
|
+
import { EditorView as EditorView11, ViewPlugin as ViewPlugin8, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap7, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
|
2214
2191
|
import defaultsDeep2 from "lodash.defaultsdeep";
|
2215
2192
|
import merge from "lodash.merge";
|
2216
2193
|
import { generateName } from "@dxos/display-name";
|
@@ -2219,7 +2196,7 @@ import { hexToHue, isNotFalsy as isNotFalsy2 } from "@dxos/util";
|
|
2219
2196
|
|
2220
2197
|
// packages/ui/react-ui-editor/src/extensions/focus.ts
|
2221
2198
|
import { StateEffect as StateEffect4, StateField as StateField5 } from "@codemirror/state";
|
2222
|
-
import { EditorView as
|
2199
|
+
import { EditorView as EditorView10 } from "@codemirror/view";
|
2223
2200
|
var focusEffect = StateEffect4.define();
|
2224
2201
|
var focusField = StateField5.define({
|
2225
2202
|
create: () => false,
|
@@ -2234,7 +2211,7 @@ var focusField = StateField5.define({
|
|
2234
2211
|
});
|
2235
2212
|
var focus = [
|
2236
2213
|
focusField,
|
2237
|
-
|
2214
|
+
EditorView10.domEventHandlers({
|
2238
2215
|
focus: (event, view) => {
|
2239
2216
|
setTimeout(() => view.dispatch({
|
2240
2217
|
effects: focusEffect.of(true)
|
@@ -2513,7 +2490,7 @@ var createBasicExtensions = (_props) => {
|
|
2513
2490
|
const props = defaultsDeep2({}, _props, defaultBasicOptions);
|
2514
2491
|
return [
|
2515
2492
|
// NOTE: Doesn't catch errors in keymap functions.
|
2516
|
-
|
2493
|
+
EditorView11.exceptionSink.of((err) => {
|
2517
2494
|
log5.catch(err, void 0, {
|
2518
2495
|
F: __dxlog_file8,
|
2519
2496
|
L: 98,
|
@@ -2528,12 +2505,12 @@ var createBasicExtensions = (_props) => {
|
|
2528
2505
|
props.drawSelection && drawSelection({
|
2529
2506
|
cursorBlinkRate: 1200
|
2530
2507
|
}),
|
2531
|
-
props.editable !== void 0 &&
|
2508
|
+
props.editable !== void 0 && EditorView11.editable.of(props.editable),
|
2532
2509
|
props.focus && focus,
|
2533
2510
|
props.highlightActiveLine && highlightActiveLine(),
|
2534
2511
|
props.history && history(),
|
2535
2512
|
props.lineNumbers && lineNumbers(),
|
2536
|
-
props.lineWrapping &&
|
2513
|
+
props.lineWrapping && EditorView11.lineWrapping,
|
2537
2514
|
props.placeholder && placeholder(props.placeholder),
|
2538
2515
|
props.readOnly !== void 0 && EditorState.readOnly.of(props.readOnly),
|
2539
2516
|
props.scrollPastEnd && scrollPastEnd(),
|
@@ -2570,14 +2547,14 @@ var defaultThemeSlots = {
|
|
2570
2547
|
var createThemeExtensions = ({ themeMode, styles: styles4, syntaxHighlighting: _syntaxHighlighting, slots: _slots } = {}) => {
|
2571
2548
|
const slots = defaultsDeep2({}, _slots, defaultThemeSlots);
|
2572
2549
|
return [
|
2573
|
-
|
2574
|
-
|
2550
|
+
EditorView11.darkTheme.of(themeMode === "dark"),
|
2551
|
+
EditorView11.baseTheme(styles4 ? merge({}, defaultTheme, styles4) : defaultTheme),
|
2575
2552
|
// https://github.com/codemirror/theme-one-dark
|
2576
2553
|
_syntaxHighlighting && (themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)),
|
2577
|
-
slots.editor?.className &&
|
2554
|
+
slots.editor?.className && EditorView11.editorAttributes.of({
|
2578
2555
|
class: slots.editor.className
|
2579
2556
|
}),
|
2580
|
-
slots.content?.className &&
|
2557
|
+
slots.content?.className && EditorView11.contentAttributes.of({
|
2581
2558
|
class: slots.content.className
|
2582
2559
|
}),
|
2583
2560
|
slots.scroll?.className && ViewPlugin8.fromClass(class {
|
@@ -2611,7 +2588,7 @@ var createDataExtensions = ({ id, text, space, identity }) => {
|
|
2611
2588
|
|
2612
2589
|
// packages/ui/react-ui-editor/src/extensions/folding.tsx
|
2613
2590
|
import { codeFolding, foldGutter } from "@codemirror/language";
|
2614
|
-
import { EditorView as
|
2591
|
+
import { EditorView as EditorView12 } from "@codemirror/view";
|
2615
2592
|
import React2 from "react";
|
2616
2593
|
import { Icon } from "@dxos/react-ui";
|
2617
2594
|
var folding = (_props = {}) => [
|
@@ -2635,7 +2612,7 @@ var folding = (_props = {}) => [
|
|
2635
2612
|
}));
|
2636
2613
|
}
|
2637
2614
|
}),
|
2638
|
-
|
2615
|
+
EditorView12.theme({
|
2639
2616
|
".cm-foldGutter": {
|
2640
2617
|
opacity: 0.3,
|
2641
2618
|
transition: "opacity 0.3s",
|
@@ -2692,14 +2669,14 @@ var schemaLinter = (validate) => (view) => {
|
|
2692
2669
|
};
|
2693
2670
|
|
2694
2671
|
// packages/ui/react-ui-editor/src/extensions/listener.ts
|
2695
|
-
import { EditorView as
|
2672
|
+
import { EditorView as EditorView13 } from "@codemirror/view";
|
2696
2673
|
var listener = ({ onFocus, onChange }) => {
|
2697
2674
|
const extensions = [];
|
2698
|
-
onFocus && extensions.push(
|
2675
|
+
onFocus && extensions.push(EditorView13.focusChangeEffect.of((_, focusing) => {
|
2699
2676
|
onFocus(focusing);
|
2700
2677
|
return null;
|
2701
2678
|
}));
|
2702
|
-
onChange && extensions.push(
|
2679
|
+
onChange && extensions.push(EditorView13.updateListener.of((update2) => {
|
2703
2680
|
onChange(update2.state.doc.toString(), update2.state.facet(documentId));
|
2704
2681
|
}));
|
2705
2682
|
return extensions;
|
@@ -2709,7 +2686,7 @@ var listener = ({ onFocus, onChange }) => {
|
|
2709
2686
|
import { snippet } from "@codemirror/autocomplete";
|
2710
2687
|
import { syntaxTree as syntaxTree2 } from "@codemirror/language";
|
2711
2688
|
import { EditorSelection as EditorSelection2 } from "@codemirror/state";
|
2712
|
-
import { EditorView as
|
2689
|
+
import { EditorView as EditorView14, keymap as keymap8 } from "@codemirror/view";
|
2713
2690
|
import { useMemo as useMemo2 } from "react";
|
2714
2691
|
var formattingEquals = (a, b) => a.blockType === b.blockType && a.strong === b.strong && a.emphasis === b.emphasis && a.strikethrough === b.strikethrough && a.code === b.code && a.link === b.link && a.listStyle === b.listStyle && a.blockQuote === b.blockQuote;
|
2715
2692
|
var Inline = /* @__PURE__ */ function(Inline2) {
|
@@ -3798,7 +3775,7 @@ var getFormatting = (state) => {
|
|
3798
3775
|
};
|
3799
3776
|
};
|
3800
3777
|
var useFormattingState = (state) => {
|
3801
|
-
return useMemo2(() =>
|
3778
|
+
return useMemo2(() => EditorView14.updateListener.of((update2) => {
|
3802
3779
|
if (update2.docChanged || update2.selectionSet) {
|
3803
3780
|
Object.entries(getFormatting(update2.state)).forEach(([key, active]) => {
|
3804
3781
|
state[key] = active;
|
@@ -4111,7 +4088,7 @@ var convertTreeToJson = (state) => {
|
|
4111
4088
|
// packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
|
4112
4089
|
import { syntaxTree as syntaxTree7 } from "@codemirror/language";
|
4113
4090
|
import { RangeSetBuilder as RangeSetBuilder5, StateEffect as StateEffect5 } from "@codemirror/state";
|
4114
|
-
import { EditorView as
|
4091
|
+
import { EditorView as EditorView18, Decoration as Decoration8, WidgetType as WidgetType5, ViewPlugin as ViewPlugin10 } from "@codemirror/view";
|
4115
4092
|
import { invariant as invariant4 } from "@dxos/invariant";
|
4116
4093
|
import { mx as mx2 } from "@dxos/react-ui-theme";
|
4117
4094
|
|
@@ -4262,7 +4239,7 @@ var getValidUrl = (str) => {
|
|
4262
4239
|
// packages/ui/react-ui-editor/src/extensions/markdown/image.ts
|
4263
4240
|
import { syntaxTree as syntaxTree5 } from "@codemirror/language";
|
4264
4241
|
import { StateField as StateField7 } from "@codemirror/state";
|
4265
|
-
import { Decoration as Decoration6, EditorView as
|
4242
|
+
import { Decoration as Decoration6, EditorView as EditorView15, WidgetType as WidgetType3 } from "@codemirror/view";
|
4266
4243
|
var image = (_options = {}) => {
|
4267
4244
|
return [
|
4268
4245
|
StateField7.define({
|
@@ -4290,7 +4267,7 @@ var image = (_options = {}) => {
|
|
4290
4267
|
add: buildDecorations(from, to, tr.state)
|
4291
4268
|
});
|
4292
4269
|
},
|
4293
|
-
provide: (field) =>
|
4270
|
+
provide: (field) => EditorView15.decorations.from(field)
|
4294
4271
|
})
|
4295
4272
|
];
|
4296
4273
|
};
|
@@ -4349,10 +4326,10 @@ var ImageWidget = class extends WidgetType3 {
|
|
4349
4326
|
};
|
4350
4327
|
|
4351
4328
|
// packages/ui/react-ui-editor/src/extensions/markdown/styles.ts
|
4352
|
-
import { EditorView as
|
4329
|
+
import { EditorView as EditorView16 } from "@codemirror/view";
|
4353
4330
|
var bulletListIndentationWidth = 24;
|
4354
4331
|
var orderedListIndentationWidth = 36;
|
4355
|
-
var formattingStyles =
|
4332
|
+
var formattingStyles = EditorView16.theme({
|
4356
4333
|
/**
|
4357
4334
|
* Horizontal rule.
|
4358
4335
|
*/
|
@@ -4474,12 +4451,12 @@ var formattingStyles = EditorView17.theme({
|
|
4474
4451
|
// packages/ui/react-ui-editor/src/extensions/markdown/table.ts
|
4475
4452
|
import { syntaxTree as syntaxTree6 } from "@codemirror/language";
|
4476
4453
|
import { RangeSetBuilder as RangeSetBuilder4, StateField as StateField8 } from "@codemirror/state";
|
4477
|
-
import { Decoration as Decoration7, EditorView as
|
4454
|
+
import { Decoration as Decoration7, EditorView as EditorView17, WidgetType as WidgetType4 } from "@codemirror/view";
|
4478
4455
|
var table = (options = {}) => {
|
4479
4456
|
return StateField8.define({
|
4480
4457
|
create: (state) => update(state, options),
|
4481
4458
|
update: (_, tr) => update(tr.state, options),
|
4482
|
-
provide: (field) =>
|
4459
|
+
provide: (field) => EditorView17.decorations.from(field)
|
4483
4460
|
});
|
4484
4461
|
};
|
4485
4462
|
var update = (state, _options) => {
|
@@ -5012,9 +4989,9 @@ var decorateMarkdown = (options = {}) => {
|
|
5012
4989
|
}
|
5013
4990
|
}, {
|
5014
4991
|
provide: (plugin) => [
|
5015
|
-
|
5016
|
-
|
5017
|
-
|
4992
|
+
EditorView18.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration8.none),
|
4993
|
+
EditorView18.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration8.none),
|
4994
|
+
EditorView18.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration8.none)
|
5018
4995
|
]
|
5019
4996
|
}),
|
5020
4997
|
image(),
|
@@ -5150,6 +5127,11 @@ var InputModeExtensions = {
|
|
5150
5127
|
]
|
5151
5128
|
};
|
5152
5129
|
|
5130
|
+
// packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
|
5131
|
+
import { Prec as Prec2 } from "@codemirror/state";
|
5132
|
+
import { Decoration as Decoration9, EditorView as EditorView19, ViewPlugin as ViewPlugin12 } from "@codemirror/view";
|
5133
|
+
import { mx as mx3 } from "@dxos/react-ui-theme";
|
5134
|
+
|
5153
5135
|
// packages/ui/react-ui-editor/src/extensions/outliner/commands.ts
|
5154
5136
|
import { indentMore } from "@codemirror/commands";
|
5155
5137
|
import { getIndentUnit } from "@codemirror/language";
|
@@ -5580,26 +5562,9 @@ var moveItemUp = (view) => {
|
|
5580
5562
|
}
|
5581
5563
|
return true;
|
5582
5564
|
};
|
5583
|
-
var deleteItem = (view) => {
|
5584
|
-
const tree = view.state.facet(treeFacet);
|
5585
|
-
const pos = getSelection(view.state).from;
|
5586
|
-
const current = tree.find(pos);
|
5587
|
-
if (current) {
|
5588
|
-
view.dispatch({
|
5589
|
-
selection: EditorSelection3.cursor(current.lineRange.from),
|
5590
|
-
changes: [
|
5591
|
-
{
|
5592
|
-
from: current.lineRange.from,
|
5593
|
-
to: Math.min(current.lineRange.to + 1, view.state.doc.length)
|
5594
|
-
}
|
5595
|
-
]
|
5596
|
-
});
|
5597
|
-
}
|
5598
|
-
return true;
|
5599
|
-
};
|
5600
5565
|
var toggleTask = (view) => {
|
5601
|
-
const tree = view.state.facet(treeFacet);
|
5602
5566
|
const pos = getSelection(view.state)?.from;
|
5567
|
+
const tree = view.state.facet(treeFacet);
|
5603
5568
|
const current = tree.find(pos);
|
5604
5569
|
if (current) {
|
5605
5570
|
const type = current.type === "task" ? "bullet" : "task";
|
@@ -5704,28 +5669,14 @@ var commands = () => keymap11.of([
|
|
5704
5669
|
run: moveItemUp
|
5705
5670
|
},
|
5706
5671
|
//
|
5707
|
-
// Delete.
|
5708
|
-
//
|
5709
|
-
{
|
5710
|
-
key: "Mod-Backspace",
|
5711
|
-
preventDefault: true,
|
5712
|
-
run: deleteItem
|
5713
|
-
},
|
5714
|
-
//
|
5715
5672
|
// Misc.
|
5716
5673
|
//
|
5717
5674
|
{
|
5718
5675
|
key: "Alt-t",
|
5719
|
-
preventDefault: true,
|
5720
5676
|
run: toggleTask
|
5721
5677
|
}
|
5722
5678
|
]);
|
5723
5679
|
|
5724
|
-
// packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
|
5725
|
-
import { Prec as Prec2 } from "@codemirror/state";
|
5726
|
-
import { Decoration as Decoration9, EditorView as EditorView20, ViewPlugin as ViewPlugin12 } from "@codemirror/view";
|
5727
|
-
import { mx as mx3 } from "@dxos/react-ui-theme";
|
5728
|
-
|
5729
5680
|
// packages/ui/react-ui-editor/src/extensions/outliner/editor.ts
|
5730
5681
|
import { EditorSelection as EditorSelection4, EditorState as EditorState2 } from "@codemirror/state";
|
5731
5682
|
import { ViewPlugin as ViewPlugin11 } from "@codemirror/view";
|
@@ -5819,12 +5770,6 @@ var editor = () => [
|
|
5819
5770
|
const line = tr.startState.doc.lineAt(fromA);
|
5820
5771
|
const match = line.text.match(LIST_ITEM_REGEX);
|
5821
5772
|
if (match) {
|
5822
|
-
const startTree = tr.startState.facet(treeFacet);
|
5823
|
-
const startItem = startTree.find(tr.startState.selection.main.from);
|
5824
|
-
const deleteLine = fromA === startItem?.lineRange.from && toA === startItem?.lineRange.to + 1;
|
5825
|
-
if (deleteLine) {
|
5826
|
-
return;
|
5827
|
-
}
|
5828
5773
|
const currentItem = tree.find(tr.state.selection.main.from);
|
5829
5774
|
if (!currentItem?.contentRange) {
|
5830
5775
|
cancel = true;
|
@@ -5882,7 +5827,7 @@ var editor = () => [
|
|
5882
5827
|
}
|
5883
5828
|
}, {
|
5884
5829
|
F: __dxlog_file12,
|
5885
|
-
L:
|
5830
|
+
L: 160,
|
5886
5831
|
S: void 0,
|
5887
5832
|
C: (f, a) => f(...a)
|
5888
5833
|
});
|
@@ -5893,7 +5838,7 @@ var editor = () => [
|
|
5893
5838
|
changes
|
5894
5839
|
}, {
|
5895
5840
|
F: __dxlog_file12,
|
5896
|
-
L:
|
5841
|
+
L: 171,
|
5897
5842
|
S: void 0,
|
5898
5843
|
C: (f, a) => f(...a)
|
5899
5844
|
});
|
@@ -5905,7 +5850,7 @@ var editor = () => [
|
|
5905
5850
|
} else if (cancel) {
|
5906
5851
|
log7("cancel", void 0, {
|
5907
5852
|
F: __dxlog_file12,
|
5908
|
-
L:
|
5853
|
+
L: 174,
|
5909
5854
|
S: void 0,
|
5910
5855
|
C: (f, a) => f(...a)
|
5911
5856
|
});
|
@@ -5916,7 +5861,7 @@ var editor = () => [
|
|
5916
5861
|
];
|
5917
5862
|
|
5918
5863
|
// packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
|
5919
|
-
var outliner = (
|
5864
|
+
var outliner = () => [
|
5920
5865
|
// Commands.
|
5921
5866
|
Prec2.highest(commands()),
|
5922
5867
|
// Selection.
|
@@ -5928,17 +5873,17 @@ var outliner = (options = {}) => [
|
|
5928
5873
|
// Floating menu.
|
5929
5874
|
floatingMenu(),
|
5930
5875
|
// Line decorations.
|
5931
|
-
decorations(
|
5876
|
+
decorations(),
|
5932
5877
|
// Default markdown decorations.
|
5933
5878
|
decorateMarkdown({
|
5934
5879
|
listPaddingLeft: 8
|
5935
5880
|
}),
|
5936
5881
|
// Researve space for menu.
|
5937
|
-
|
5882
|
+
EditorView19.contentAttributes.of({
|
5938
5883
|
class: "is-full !mr-[3rem]"
|
5939
5884
|
})
|
5940
5885
|
];
|
5941
|
-
var decorations = (
|
5886
|
+
var decorations = () => [
|
5942
5887
|
ViewPlugin12.fromClass(class {
|
5943
5888
|
constructor(view) {
|
5944
5889
|
this.decorations = Decoration9.none;
|
@@ -5974,7 +5919,7 @@ var decorations = (options) => [
|
|
5974
5919
|
decorations: (v) => v.decorations
|
5975
5920
|
}),
|
5976
5921
|
// Theme.
|
5977
|
-
|
5922
|
+
EditorView19.theme({
|
5978
5923
|
".cm-list-item": {
|
5979
5924
|
borderLeftWidth: "1px",
|
5980
5925
|
borderRightWidth: "1px",
|
@@ -5989,29 +5934,29 @@ var decorations = (options) => [
|
|
5989
5934
|
borderTopLeftRadius: "4px",
|
5990
5935
|
borderTopRightRadius: "4px",
|
5991
5936
|
paddingTop: "4px",
|
5992
|
-
marginTop: "
|
5937
|
+
marginTop: "8px"
|
5993
5938
|
},
|
5994
5939
|
".cm-list-item-end": {
|
5995
5940
|
borderBottomWidth: "1px",
|
5996
5941
|
borderBottomLeftRadius: "4px",
|
5997
5942
|
borderBottomRightRadius: "4px",
|
5998
5943
|
paddingBottom: "4px",
|
5999
|
-
marginBottom: "
|
5944
|
+
marginBottom: "8px"
|
6000
5945
|
},
|
6001
5946
|
".cm-list-item-selected": {
|
6002
|
-
borderColor:
|
5947
|
+
borderColor: "var(--dx-separator)"
|
6003
5948
|
},
|
6004
5949
|
".cm-list-item-focused": {
|
6005
5950
|
borderColor: "var(--dx-accentFocusIndicator)"
|
6006
5951
|
}
|
6007
|
-
})
|
5952
|
+
})
|
6008
5953
|
];
|
6009
5954
|
|
6010
5955
|
// packages/ui/react-ui-editor/src/extensions/preview/preview.ts
|
6011
5956
|
import "@dxos/lit-ui/dx-ref-tag.pcss";
|
6012
5957
|
import { syntaxTree as syntaxTree10 } from "@codemirror/language";
|
6013
5958
|
import { RangeSetBuilder as RangeSetBuilder6, StateField as StateField10 } from "@codemirror/state";
|
6014
|
-
import { Decoration as Decoration10, EditorView as
|
5959
|
+
import { Decoration as Decoration10, EditorView as EditorView20, WidgetType as WidgetType6 } from "@codemirror/view";
|
6015
5960
|
var preview = (options = {}) => {
|
6016
5961
|
return [
|
6017
5962
|
// NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
|
@@ -6020,11 +5965,11 @@ var preview = (options = {}) => {
|
|
6020
5965
|
create: (state) => buildDecorations3(state, options),
|
6021
5966
|
update: (_, tr) => buildDecorations3(tr.state, options),
|
6022
5967
|
provide: (field) => [
|
6023
|
-
|
6024
|
-
|
5968
|
+
EditorView20.decorations.from(field),
|
5969
|
+
EditorView20.atomicRanges.of((view) => view.state.field(field))
|
6025
5970
|
]
|
6026
5971
|
}),
|
6027
|
-
|
5972
|
+
EditorView20.theme({
|
6028
5973
|
".cm-preview-block": {
|
6029
5974
|
marginLeft: "-1rem",
|
6030
5975
|
marginRight: "-1rem",
|
@@ -6517,7 +6462,7 @@ var createViewMode = (state, onViewModeChange) => {
|
|
6517
6462
|
};
|
6518
6463
|
|
6519
6464
|
// packages/ui/react-ui-editor/src/defaults.ts
|
6520
|
-
import { EditorView as
|
6465
|
+
import { EditorView as EditorView21 } from "@codemirror/view";
|
6521
6466
|
import { mx as mx4 } from "@dxos/react-ui-theme";
|
6522
6467
|
var editorWidth = "!mli-auto is-full max-is-[min(50rem,100%-4rem)]";
|
6523
6468
|
var editorSlots = {
|
@@ -6528,12 +6473,12 @@ var editorSlots = {
|
|
6528
6473
|
className: editorWidth
|
6529
6474
|
}
|
6530
6475
|
};
|
6531
|
-
var editorGutter =
|
6476
|
+
var editorGutter = EditorView21.theme({
|
6532
6477
|
".cm-gutters": {
|
6533
6478
|
paddingRight: "1rem"
|
6534
6479
|
}
|
6535
6480
|
});
|
6536
|
-
var editorMonospace =
|
6481
|
+
var editorMonospace = EditorView21.theme({
|
6537
6482
|
".cm-content": {
|
6538
6483
|
fontFamily: fontMono
|
6539
6484
|
}
|
@@ -6785,7 +6730,7 @@ var RefDropdownMenu = {
|
|
6785
6730
|
|
6786
6731
|
// packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
|
6787
6732
|
import { EditorState as EditorState3 } from "@codemirror/state";
|
6788
|
-
import { EditorView as
|
6733
|
+
import { EditorView as EditorView22 } from "@codemirror/view";
|
6789
6734
|
import { useFocusableGroup } from "@fluentui/react-tabster";
|
6790
6735
|
import { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef3, useState as useState3 } from "react";
|
6791
6736
|
import { log as log8 } from "@dxos/log";
|
@@ -6829,7 +6774,7 @@ var useTextEditor = (props = {}, deps = []) => {
|
|
6829
6774
|
id && documentId.of(id),
|
6830
6775
|
extensions,
|
6831
6776
|
// NOTE: This doesn't catch errors in keymap functions.
|
6832
|
-
|
6777
|
+
EditorView22.exceptionSink.of((err) => {
|
6833
6778
|
log8.catch(err, void 0, {
|
6834
6779
|
F: __dxlog_file13,
|
6835
6780
|
L: 98,
|
@@ -6839,10 +6784,10 @@ var useTextEditor = (props = {}, deps = []) => {
|
|
6839
6784
|
})
|
6840
6785
|
].filter(isNotFalsy4)
|
6841
6786
|
});
|
6842
|
-
view2 = new
|
6787
|
+
view2 = new EditorView22({
|
6843
6788
|
parent: parentRef.current,
|
6844
6789
|
state,
|
6845
|
-
scrollTo: scrollTo ?
|
6790
|
+
scrollTo: scrollTo ? EditorView22.scrollIntoView(scrollTo, {
|
6846
6791
|
yMargin: 96
|
6847
6792
|
}) : void 0,
|
6848
6793
|
dispatchTransactions: debug ? debugDispatcher : void 0
|
@@ -6941,7 +6886,7 @@ export {
|
|
6941
6886
|
EditorInputModes,
|
6942
6887
|
EditorState4 as EditorState,
|
6943
6888
|
EditorToolbar,
|
6944
|
-
|
6889
|
+
EditorView23 as EditorView,
|
6945
6890
|
EditorViewMode,
|
6946
6891
|
EditorViewModes,
|
6947
6892
|
Inline,
|
@@ -6970,7 +6915,6 @@ export {
|
|
6970
6915
|
closeEffect,
|
6971
6916
|
command,
|
6972
6917
|
commandKeyBindings,
|
6973
|
-
commands,
|
6974
6918
|
commentClickedEffect,
|
6975
6919
|
comments,
|
6976
6920
|
commentsState,
|
@@ -6993,7 +6937,6 @@ export {
|
|
6993
6937
|
debugTree,
|
6994
6938
|
decorateMarkdown,
|
6995
6939
|
defaultOptions,
|
6996
|
-
deleteItem,
|
6997
6940
|
documentId,
|
6998
6941
|
dropFile,
|
6999
6942
|
editorGutter,
|
@@ -7013,8 +6956,6 @@ export {
|
|
7013
6956
|
getListItemContent,
|
7014
6957
|
getRange,
|
7015
6958
|
image,
|
7016
|
-
indentItemLess,
|
7017
|
-
indentItemMore,
|
7018
6959
|
insertTable,
|
7019
6960
|
itemToJSON,
|
7020
6961
|
keymap13 as keymap,
|
@@ -7027,8 +6968,6 @@ export {
|
|
7027
6968
|
markdownTagsExtensions,
|
7028
6969
|
matchCompletion,
|
7029
6970
|
mention,
|
7030
|
-
moveItemDown,
|
7031
|
-
moveItemUp,
|
7032
6971
|
openCommand,
|
7033
6972
|
openEffect,
|
7034
6973
|
outliner,
|
@@ -7065,7 +7004,6 @@ export {
|
|
7065
7004
|
toggleStrikethrough,
|
7066
7005
|
toggleStrong,
|
7067
7006
|
toggleStyle,
|
7068
|
-
toggleTask,
|
7069
7007
|
translations_default as translations,
|
7070
7008
|
traverse,
|
7071
7009
|
treeFacet,
|