@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
@@ -37,7 +37,7 @@ var translations_default = [
|
|
37
37
|
|
38
38
|
// packages/ui/react-ui-editor/src/index.ts
|
39
39
|
import { EditorState as EditorState4 } from "@codemirror/state";
|
40
|
-
import { EditorView as
|
40
|
+
import { EditorView as EditorView23, keymap as keymap13 } from "@codemirror/view";
|
41
41
|
import { tags as tags2 } from "@lezer/highlight";
|
42
42
|
import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
|
43
43
|
|
@@ -1460,7 +1460,7 @@ var command = (options = {}) => {
|
|
1460
1460
|
};
|
1461
1461
|
|
1462
1462
|
// packages/ui/react-ui-editor/src/extensions/command/menu.ts
|
1463
|
-
import {
|
1463
|
+
import { ViewPlugin as ViewPlugin5 } from "@codemirror/view";
|
1464
1464
|
var floatingMenu = (options = {}) => [
|
1465
1465
|
ViewPlugin5.fromClass(class {
|
1466
1466
|
constructor(view) {
|
@@ -1474,24 +1474,20 @@ var floatingMenu = (options = {}) => [
|
|
1474
1474
|
icon.setAttribute("icon", options.icon ?? "ph--dots-three-outline--regular");
|
1475
1475
|
const button = document.createElement("button");
|
1476
1476
|
button.appendChild(icon);
|
1477
|
+
button.classList.add("grid", "items-center", "justify-center", "w-8", "h-8");
|
1477
1478
|
this.tag = document.createElement("dx-ref-tag");
|
1478
|
-
this.tag.classList.add("
|
1479
|
+
this.tag.classList.add("border-none", "fixed", "p-0");
|
1479
1480
|
this.tag.appendChild(button);
|
1480
1481
|
container.appendChild(this.tag);
|
1481
1482
|
container.addEventListener("scroll", this.scheduleUpdate.bind(this));
|
1482
1483
|
this.scheduleUpdate();
|
1483
1484
|
}
|
1484
1485
|
update(update2) {
|
1485
|
-
this.tag.dataset.focused = update2.view.hasFocus ? "true" : "false";
|
1486
|
-
if (!update2.view.hasFocus) {
|
1487
|
-
return;
|
1488
|
-
}
|
1489
1486
|
if (update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(openEffect)))) {
|
1490
1487
|
this.tag.style.display = "none";
|
1491
|
-
this.tag.classList.add("opacity-10");
|
1492
1488
|
} else if (update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(closeEffect)))) {
|
1493
1489
|
this.tag.style.display = "block";
|
1494
|
-
} else if (update2.
|
1490
|
+
} else if (update2.selectionSet || update2.viewportChanged || update2.docChanged || update2.geometryChanged) {
|
1495
1491
|
this.scheduleUpdate();
|
1496
1492
|
}
|
1497
1493
|
}
|
@@ -1523,25 +1519,6 @@ var floatingMenu = (options = {}) => [
|
|
1523
1519
|
cancelAnimationFrame(this.rafId);
|
1524
1520
|
}
|
1525
1521
|
}
|
1526
|
-
}),
|
1527
|
-
EditorView7.theme({
|
1528
|
-
".cm-ref-tag": {
|
1529
|
-
position: "fixed",
|
1530
|
-
padding: "0",
|
1531
|
-
border: "none",
|
1532
|
-
transition: "opacity 0.3s ease-in-out",
|
1533
|
-
opacity: 0.1
|
1534
|
-
},
|
1535
|
-
".cm-ref-tag button": {
|
1536
|
-
display: "grid",
|
1537
|
-
alignItems: "center",
|
1538
|
-
justifyContent: "center",
|
1539
|
-
width: "2rem",
|
1540
|
-
height: "2rem"
|
1541
|
-
},
|
1542
|
-
'.cm-ref-tag[data-focused="true"]': {
|
1543
|
-
opacity: 1
|
1544
|
-
}
|
1545
1522
|
})
|
1546
1523
|
];
|
1547
1524
|
|
@@ -1631,7 +1608,7 @@ var matchCompletion = (completion, word) => {
|
|
1631
1608
|
// packages/ui/react-ui-editor/src/extensions/comments.ts
|
1632
1609
|
import { invertedEffects } from "@codemirror/commands";
|
1633
1610
|
import { StateEffect as StateEffect3, StateField as StateField3 } from "@codemirror/state";
|
1634
|
-
import { hoverTooltip, keymap as keymap6, Decoration as Decoration5, EditorView as
|
1611
|
+
import { hoverTooltip, keymap as keymap6, Decoration as Decoration5, EditorView as EditorView8, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
|
1635
1612
|
import sortBy from "lodash.sortby";
|
1636
1613
|
import { useEffect } from "react";
|
1637
1614
|
import { debounce as debounce2 } from "@dxos/async";
|
@@ -1640,7 +1617,7 @@ import { isNonNullable } from "@dxos/util";
|
|
1640
1617
|
|
1641
1618
|
// packages/ui/react-ui-editor/src/extensions/selection.ts
|
1642
1619
|
import { Transaction } from "@codemirror/state";
|
1643
|
-
import { EditorView as
|
1620
|
+
import { EditorView as EditorView7, keymap as keymap5 } from "@codemirror/view";
|
1644
1621
|
import { debounce } from "@dxos/async";
|
1645
1622
|
import { invariant as invariant3 } from "@dxos/invariant";
|
1646
1623
|
import { isNotFalsy } from "@dxos/util";
|
@@ -1651,7 +1628,7 @@ var createEditorStateTransaction = ({ scrollTo, selection }) => {
|
|
1651
1628
|
return {
|
1652
1629
|
selection,
|
1653
1630
|
scrollIntoView: !scrollTo,
|
1654
|
-
effects: scrollTo ?
|
1631
|
+
effects: scrollTo ? EditorView7.scrollIntoView(scrollTo, {
|
1655
1632
|
yMargin: 96
|
1656
1633
|
}) : void 0,
|
1657
1634
|
annotations: Transaction.userEvent.of(stateRestoreAnnotation)
|
@@ -1693,7 +1670,7 @@ var selectionState = ({ getState, setState } = {}) => {
|
|
1693
1670
|
// setStateDebounced(id, {});
|
1694
1671
|
// },
|
1695
1672
|
// }),
|
1696
|
-
|
1673
|
+
EditorView7.updateListener.of(({ view, transactions }) => {
|
1697
1674
|
const id = view.state.facet(documentId);
|
1698
1675
|
if (!id || transactions.some((tr) => tr.isUserEvent(stateRestoreAnnotation))) {
|
1699
1676
|
return;
|
@@ -1774,7 +1751,7 @@ var commentsState = StateField3.define({
|
|
1774
1751
|
return value;
|
1775
1752
|
}
|
1776
1753
|
});
|
1777
|
-
var styles2 =
|
1754
|
+
var styles2 = EditorView8.theme({
|
1778
1755
|
".cm-comment, .cm-comment-current": {
|
1779
1756
|
margin: "0 -3px",
|
1780
1757
|
padding: "3px",
|
@@ -1794,7 +1771,7 @@ var createCommentMark = (id, isCurrent) => Decoration5.mark({
|
|
1794
1771
|
"data-comment-id": id
|
1795
1772
|
}
|
1796
1773
|
});
|
1797
|
-
var commentsDecorations =
|
1774
|
+
var commentsDecorations = EditorView8.decorations.compute([
|
1798
1775
|
commentsState
|
1799
1776
|
], (state) => {
|
1800
1777
|
const { selection: { current }, comments: comments2 } = state.field(commentsState);
|
@@ -1817,7 +1794,7 @@ var commentsDecorations = EditorView9.decorations.compute([
|
|
1817
1794
|
return Decoration5.set(decorations2);
|
1818
1795
|
});
|
1819
1796
|
var commentClickedEffect = StateEffect3.define();
|
1820
|
-
var handleCommentClick =
|
1797
|
+
var handleCommentClick = EditorView8.domEventHandlers({
|
1821
1798
|
click: (event, view) => {
|
1822
1799
|
let target = event.target;
|
1823
1800
|
const editorRoot = view.dom;
|
@@ -1856,7 +1833,7 @@ var trackPastedComments = (onUpdate) => {
|
|
1856
1833
|
}
|
1857
1834
|
};
|
1858
1835
|
return [
|
1859
|
-
|
1836
|
+
EditorView8.domEventHandlers({
|
1860
1837
|
cut: handleTrack,
|
1861
1838
|
copy: handleTrack
|
1862
1839
|
}),
|
@@ -1878,7 +1855,7 @@ var trackPastedComments = (onUpdate) => {
|
|
1878
1855
|
return effects;
|
1879
1856
|
}),
|
1880
1857
|
// Handle paste or the undo of comment deletion.
|
1881
|
-
|
1858
|
+
EditorView8.updateListener.of((update2) => {
|
1882
1859
|
const restore = [];
|
1883
1860
|
for (let i = 0; i < update2.transactions.length; i++) {
|
1884
1861
|
const tr = update2.transactions[i];
|
@@ -2020,7 +1997,7 @@ var comments = (options = {}) => {
|
|
2020
1997
|
//
|
2021
1998
|
// Track deleted ranges and update ranges for decorations.
|
2022
1999
|
//
|
2023
|
-
|
2000
|
+
EditorView8.updateListener.of(({ view, state, changes }) => {
|
2024
2001
|
let mod = false;
|
2025
2002
|
const { comments: comments2, ...value } = state.field(commentsState);
|
2026
2003
|
changes.iterChanges((from, to, from2, to2) => {
|
@@ -2052,7 +2029,7 @@ var comments = (options = {}) => {
|
|
2052
2029
|
//
|
2053
2030
|
// Track selection/proximity.
|
2054
2031
|
//
|
2055
|
-
|
2032
|
+
EditorView8.updateListener.of(({ view, state }) => {
|
2056
2033
|
let min = Infinity;
|
2057
2034
|
const { selection: { current, closest }, comments: comments2 } = state.field(commentsState);
|
2058
2035
|
const { head } = state.selection.main;
|
@@ -2106,7 +2083,7 @@ var scrollThreadIntoView = (view, id, center = true) => {
|
|
2106
2083
|
anchor: range.from
|
2107
2084
|
} : void 0,
|
2108
2085
|
effects: [
|
2109
|
-
needsScroll ?
|
2086
|
+
needsScroll ? EditorView8.scrollIntoView(range.from, center ? {
|
2110
2087
|
y: "center"
|
2111
2088
|
} : void 0) : [],
|
2112
2089
|
needsSelectionUpdate ? setSelection.of({
|
@@ -2170,8 +2147,8 @@ var debugNodeLogger = (log9 = console.log) => {
|
|
2170
2147
|
};
|
2171
2148
|
|
2172
2149
|
// packages/ui/react-ui-editor/src/extensions/dnd.ts
|
2173
|
-
import { dropCursor, EditorView as
|
2174
|
-
var styles3 =
|
2150
|
+
import { dropCursor, EditorView as EditorView9 } from "@codemirror/view";
|
2151
|
+
var styles3 = EditorView9.theme({
|
2175
2152
|
".cm-dropCursor": {
|
2176
2153
|
borderLeft: "2px solid var(--dx-accentText)",
|
2177
2154
|
color: "var(--dx-accentText)",
|
@@ -2185,7 +2162,7 @@ var dropFile = (options = {}) => {
|
|
2185
2162
|
return [
|
2186
2163
|
styles3,
|
2187
2164
|
dropCursor(),
|
2188
|
-
|
2165
|
+
EditorView9.domEventHandlers({
|
2189
2166
|
drop: (event, view) => {
|
2190
2167
|
event.preventDefault();
|
2191
2168
|
const files = event.dataTransfer?.files;
|
@@ -2212,7 +2189,7 @@ import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@cod
|
|
2212
2189
|
import { searchKeymap } from "@codemirror/search";
|
2213
2190
|
import { EditorState } from "@codemirror/state";
|
2214
2191
|
import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
|
2215
|
-
import { EditorView as
|
2192
|
+
import { EditorView as EditorView11, ViewPlugin as ViewPlugin8, drawSelection, dropCursor as dropCursor2, highlightActiveLine, keymap as keymap7, lineNumbers, placeholder, scrollPastEnd } from "@codemirror/view";
|
2216
2193
|
import defaultsDeep2 from "lodash.defaultsdeep";
|
2217
2194
|
import merge from "lodash.merge";
|
2218
2195
|
import { generateName } from "@dxos/display-name";
|
@@ -2221,7 +2198,7 @@ import { hexToHue, isNotFalsy as isNotFalsy2 } from "@dxos/util";
|
|
2221
2198
|
|
2222
2199
|
// packages/ui/react-ui-editor/src/extensions/focus.ts
|
2223
2200
|
import { StateEffect as StateEffect4, StateField as StateField5 } from "@codemirror/state";
|
2224
|
-
import { EditorView as
|
2201
|
+
import { EditorView as EditorView10 } from "@codemirror/view";
|
2225
2202
|
var focusEffect = StateEffect4.define();
|
2226
2203
|
var focusField = StateField5.define({
|
2227
2204
|
create: () => false,
|
@@ -2236,7 +2213,7 @@ var focusField = StateField5.define({
|
|
2236
2213
|
});
|
2237
2214
|
var focus = [
|
2238
2215
|
focusField,
|
2239
|
-
|
2216
|
+
EditorView10.domEventHandlers({
|
2240
2217
|
focus: (event, view) => {
|
2241
2218
|
setTimeout(() => view.dispatch({
|
2242
2219
|
effects: focusEffect.of(true)
|
@@ -2515,7 +2492,7 @@ var createBasicExtensions = (_props) => {
|
|
2515
2492
|
const props = defaultsDeep2({}, _props, defaultBasicOptions);
|
2516
2493
|
return [
|
2517
2494
|
// NOTE: Doesn't catch errors in keymap functions.
|
2518
|
-
|
2495
|
+
EditorView11.exceptionSink.of((err) => {
|
2519
2496
|
log5.catch(err, void 0, {
|
2520
2497
|
F: __dxlog_file8,
|
2521
2498
|
L: 98,
|
@@ -2530,12 +2507,12 @@ var createBasicExtensions = (_props) => {
|
|
2530
2507
|
props.drawSelection && drawSelection({
|
2531
2508
|
cursorBlinkRate: 1200
|
2532
2509
|
}),
|
2533
|
-
props.editable !== void 0 &&
|
2510
|
+
props.editable !== void 0 && EditorView11.editable.of(props.editable),
|
2534
2511
|
props.focus && focus,
|
2535
2512
|
props.highlightActiveLine && highlightActiveLine(),
|
2536
2513
|
props.history && history(),
|
2537
2514
|
props.lineNumbers && lineNumbers(),
|
2538
|
-
props.lineWrapping &&
|
2515
|
+
props.lineWrapping && EditorView11.lineWrapping,
|
2539
2516
|
props.placeholder && placeholder(props.placeholder),
|
2540
2517
|
props.readOnly !== void 0 && EditorState.readOnly.of(props.readOnly),
|
2541
2518
|
props.scrollPastEnd && scrollPastEnd(),
|
@@ -2572,14 +2549,14 @@ var defaultThemeSlots = {
|
|
2572
2549
|
var createThemeExtensions = ({ themeMode, styles: styles4, syntaxHighlighting: _syntaxHighlighting, slots: _slots } = {}) => {
|
2573
2550
|
const slots = defaultsDeep2({}, _slots, defaultThemeSlots);
|
2574
2551
|
return [
|
2575
|
-
|
2576
|
-
|
2552
|
+
EditorView11.darkTheme.of(themeMode === "dark"),
|
2553
|
+
EditorView11.baseTheme(styles4 ? merge({}, defaultTheme, styles4) : defaultTheme),
|
2577
2554
|
// https://github.com/codemirror/theme-one-dark
|
2578
2555
|
_syntaxHighlighting && (themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)),
|
2579
|
-
slots.editor?.className &&
|
2556
|
+
slots.editor?.className && EditorView11.editorAttributes.of({
|
2580
2557
|
class: slots.editor.className
|
2581
2558
|
}),
|
2582
|
-
slots.content?.className &&
|
2559
|
+
slots.content?.className && EditorView11.contentAttributes.of({
|
2583
2560
|
class: slots.content.className
|
2584
2561
|
}),
|
2585
2562
|
slots.scroll?.className && ViewPlugin8.fromClass(class {
|
@@ -2613,7 +2590,7 @@ var createDataExtensions = ({ id, text, space, identity }) => {
|
|
2613
2590
|
|
2614
2591
|
// packages/ui/react-ui-editor/src/extensions/folding.tsx
|
2615
2592
|
import { codeFolding, foldGutter } from "@codemirror/language";
|
2616
|
-
import { EditorView as
|
2593
|
+
import { EditorView as EditorView12 } from "@codemirror/view";
|
2617
2594
|
import React2 from "react";
|
2618
2595
|
import { Icon } from "@dxos/react-ui";
|
2619
2596
|
var folding = (_props = {}) => [
|
@@ -2637,7 +2614,7 @@ var folding = (_props = {}) => [
|
|
2637
2614
|
}));
|
2638
2615
|
}
|
2639
2616
|
}),
|
2640
|
-
|
2617
|
+
EditorView12.theme({
|
2641
2618
|
".cm-foldGutter": {
|
2642
2619
|
opacity: 0.3,
|
2643
2620
|
transition: "opacity 0.3s",
|
@@ -2694,14 +2671,14 @@ var schemaLinter = (validate) => (view) => {
|
|
2694
2671
|
};
|
2695
2672
|
|
2696
2673
|
// packages/ui/react-ui-editor/src/extensions/listener.ts
|
2697
|
-
import { EditorView as
|
2674
|
+
import { EditorView as EditorView13 } from "@codemirror/view";
|
2698
2675
|
var listener = ({ onFocus, onChange }) => {
|
2699
2676
|
const extensions = [];
|
2700
|
-
onFocus && extensions.push(
|
2677
|
+
onFocus && extensions.push(EditorView13.focusChangeEffect.of((_, focusing) => {
|
2701
2678
|
onFocus(focusing);
|
2702
2679
|
return null;
|
2703
2680
|
}));
|
2704
|
-
onChange && extensions.push(
|
2681
|
+
onChange && extensions.push(EditorView13.updateListener.of((update2) => {
|
2705
2682
|
onChange(update2.state.doc.toString(), update2.state.facet(documentId));
|
2706
2683
|
}));
|
2707
2684
|
return extensions;
|
@@ -2711,7 +2688,7 @@ var listener = ({ onFocus, onChange }) => {
|
|
2711
2688
|
import { snippet } from "@codemirror/autocomplete";
|
2712
2689
|
import { syntaxTree as syntaxTree2 } from "@codemirror/language";
|
2713
2690
|
import { EditorSelection as EditorSelection2 } from "@codemirror/state";
|
2714
|
-
import { EditorView as
|
2691
|
+
import { EditorView as EditorView14, keymap as keymap8 } from "@codemirror/view";
|
2715
2692
|
import { useMemo as useMemo2 } from "react";
|
2716
2693
|
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;
|
2717
2694
|
var Inline = /* @__PURE__ */ function(Inline2) {
|
@@ -3800,7 +3777,7 @@ var getFormatting = (state) => {
|
|
3800
3777
|
};
|
3801
3778
|
};
|
3802
3779
|
var useFormattingState = (state) => {
|
3803
|
-
return useMemo2(() =>
|
3780
|
+
return useMemo2(() => EditorView14.updateListener.of((update2) => {
|
3804
3781
|
if (update2.docChanged || update2.selectionSet) {
|
3805
3782
|
Object.entries(getFormatting(update2.state)).forEach(([key, active]) => {
|
3806
3783
|
state[key] = active;
|
@@ -4113,7 +4090,7 @@ var convertTreeToJson = (state) => {
|
|
4113
4090
|
// packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
|
4114
4091
|
import { syntaxTree as syntaxTree7 } from "@codemirror/language";
|
4115
4092
|
import { RangeSetBuilder as RangeSetBuilder5, StateEffect as StateEffect5 } from "@codemirror/state";
|
4116
|
-
import { EditorView as
|
4093
|
+
import { EditorView as EditorView18, Decoration as Decoration8, WidgetType as WidgetType5, ViewPlugin as ViewPlugin10 } from "@codemirror/view";
|
4117
4094
|
import { invariant as invariant4 } from "@dxos/invariant";
|
4118
4095
|
import { mx as mx2 } from "@dxos/react-ui-theme";
|
4119
4096
|
|
@@ -4264,7 +4241,7 @@ var getValidUrl = (str) => {
|
|
4264
4241
|
// packages/ui/react-ui-editor/src/extensions/markdown/image.ts
|
4265
4242
|
import { syntaxTree as syntaxTree5 } from "@codemirror/language";
|
4266
4243
|
import { StateField as StateField7 } from "@codemirror/state";
|
4267
|
-
import { Decoration as Decoration6, EditorView as
|
4244
|
+
import { Decoration as Decoration6, EditorView as EditorView15, WidgetType as WidgetType3 } from "@codemirror/view";
|
4268
4245
|
var image = (_options = {}) => {
|
4269
4246
|
return [
|
4270
4247
|
StateField7.define({
|
@@ -4292,7 +4269,7 @@ var image = (_options = {}) => {
|
|
4292
4269
|
add: buildDecorations(from, to, tr.state)
|
4293
4270
|
});
|
4294
4271
|
},
|
4295
|
-
provide: (field) =>
|
4272
|
+
provide: (field) => EditorView15.decorations.from(field)
|
4296
4273
|
})
|
4297
4274
|
];
|
4298
4275
|
};
|
@@ -4351,10 +4328,10 @@ var ImageWidget = class extends WidgetType3 {
|
|
4351
4328
|
};
|
4352
4329
|
|
4353
4330
|
// packages/ui/react-ui-editor/src/extensions/markdown/styles.ts
|
4354
|
-
import { EditorView as
|
4331
|
+
import { EditorView as EditorView16 } from "@codemirror/view";
|
4355
4332
|
var bulletListIndentationWidth = 24;
|
4356
4333
|
var orderedListIndentationWidth = 36;
|
4357
|
-
var formattingStyles =
|
4334
|
+
var formattingStyles = EditorView16.theme({
|
4358
4335
|
/**
|
4359
4336
|
* Horizontal rule.
|
4360
4337
|
*/
|
@@ -4476,12 +4453,12 @@ var formattingStyles = EditorView17.theme({
|
|
4476
4453
|
// packages/ui/react-ui-editor/src/extensions/markdown/table.ts
|
4477
4454
|
import { syntaxTree as syntaxTree6 } from "@codemirror/language";
|
4478
4455
|
import { RangeSetBuilder as RangeSetBuilder4, StateField as StateField8 } from "@codemirror/state";
|
4479
|
-
import { Decoration as Decoration7, EditorView as
|
4456
|
+
import { Decoration as Decoration7, EditorView as EditorView17, WidgetType as WidgetType4 } from "@codemirror/view";
|
4480
4457
|
var table = (options = {}) => {
|
4481
4458
|
return StateField8.define({
|
4482
4459
|
create: (state) => update(state, options),
|
4483
4460
|
update: (_, tr) => update(tr.state, options),
|
4484
|
-
provide: (field) =>
|
4461
|
+
provide: (field) => EditorView17.decorations.from(field)
|
4485
4462
|
});
|
4486
4463
|
};
|
4487
4464
|
var update = (state, _options) => {
|
@@ -5014,9 +4991,9 @@ var decorateMarkdown = (options = {}) => {
|
|
5014
4991
|
}
|
5015
4992
|
}, {
|
5016
4993
|
provide: (plugin) => [
|
5017
|
-
|
5018
|
-
|
5019
|
-
|
4994
|
+
EditorView18.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration8.none),
|
4995
|
+
EditorView18.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration8.none),
|
4996
|
+
EditorView18.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration8.none)
|
5020
4997
|
]
|
5021
4998
|
}),
|
5022
4999
|
image(),
|
@@ -5152,6 +5129,11 @@ var InputModeExtensions = {
|
|
5152
5129
|
]
|
5153
5130
|
};
|
5154
5131
|
|
5132
|
+
// packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
|
5133
|
+
import { Prec as Prec2 } from "@codemirror/state";
|
5134
|
+
import { Decoration as Decoration9, EditorView as EditorView19, ViewPlugin as ViewPlugin12 } from "@codemirror/view";
|
5135
|
+
import { mx as mx3 } from "@dxos/react-ui-theme";
|
5136
|
+
|
5155
5137
|
// packages/ui/react-ui-editor/src/extensions/outliner/commands.ts
|
5156
5138
|
import { indentMore } from "@codemirror/commands";
|
5157
5139
|
import { getIndentUnit } from "@codemirror/language";
|
@@ -5582,26 +5564,9 @@ var moveItemUp = (view) => {
|
|
5582
5564
|
}
|
5583
5565
|
return true;
|
5584
5566
|
};
|
5585
|
-
var deleteItem = (view) => {
|
5586
|
-
const tree = view.state.facet(treeFacet);
|
5587
|
-
const pos = getSelection(view.state).from;
|
5588
|
-
const current = tree.find(pos);
|
5589
|
-
if (current) {
|
5590
|
-
view.dispatch({
|
5591
|
-
selection: EditorSelection3.cursor(current.lineRange.from),
|
5592
|
-
changes: [
|
5593
|
-
{
|
5594
|
-
from: current.lineRange.from,
|
5595
|
-
to: Math.min(current.lineRange.to + 1, view.state.doc.length)
|
5596
|
-
}
|
5597
|
-
]
|
5598
|
-
});
|
5599
|
-
}
|
5600
|
-
return true;
|
5601
|
-
};
|
5602
5567
|
var toggleTask = (view) => {
|
5603
|
-
const tree = view.state.facet(treeFacet);
|
5604
5568
|
const pos = getSelection(view.state)?.from;
|
5569
|
+
const tree = view.state.facet(treeFacet);
|
5605
5570
|
const current = tree.find(pos);
|
5606
5571
|
if (current) {
|
5607
5572
|
const type = current.type === "task" ? "bullet" : "task";
|
@@ -5706,28 +5671,14 @@ var commands = () => keymap11.of([
|
|
5706
5671
|
run: moveItemUp
|
5707
5672
|
},
|
5708
5673
|
//
|
5709
|
-
// Delete.
|
5710
|
-
//
|
5711
|
-
{
|
5712
|
-
key: "Mod-Backspace",
|
5713
|
-
preventDefault: true,
|
5714
|
-
run: deleteItem
|
5715
|
-
},
|
5716
|
-
//
|
5717
5674
|
// Misc.
|
5718
5675
|
//
|
5719
5676
|
{
|
5720
5677
|
key: "Alt-t",
|
5721
|
-
preventDefault: true,
|
5722
5678
|
run: toggleTask
|
5723
5679
|
}
|
5724
5680
|
]);
|
5725
5681
|
|
5726
|
-
// packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
|
5727
|
-
import { Prec as Prec2 } from "@codemirror/state";
|
5728
|
-
import { Decoration as Decoration9, EditorView as EditorView20, ViewPlugin as ViewPlugin12 } from "@codemirror/view";
|
5729
|
-
import { mx as mx3 } from "@dxos/react-ui-theme";
|
5730
|
-
|
5731
5682
|
// packages/ui/react-ui-editor/src/extensions/outliner/editor.ts
|
5732
5683
|
import { EditorSelection as EditorSelection4, EditorState as EditorState2 } from "@codemirror/state";
|
5733
5684
|
import { ViewPlugin as ViewPlugin11 } from "@codemirror/view";
|
@@ -5821,12 +5772,6 @@ var editor = () => [
|
|
5821
5772
|
const line = tr.startState.doc.lineAt(fromA);
|
5822
5773
|
const match = line.text.match(LIST_ITEM_REGEX);
|
5823
5774
|
if (match) {
|
5824
|
-
const startTree = tr.startState.facet(treeFacet);
|
5825
|
-
const startItem = startTree.find(tr.startState.selection.main.from);
|
5826
|
-
const deleteLine = fromA === startItem?.lineRange.from && toA === startItem?.lineRange.to + 1;
|
5827
|
-
if (deleteLine) {
|
5828
|
-
return;
|
5829
|
-
}
|
5830
5775
|
const currentItem = tree.find(tr.state.selection.main.from);
|
5831
5776
|
if (!currentItem?.contentRange) {
|
5832
5777
|
cancel = true;
|
@@ -5884,7 +5829,7 @@ var editor = () => [
|
|
5884
5829
|
}
|
5885
5830
|
}, {
|
5886
5831
|
F: __dxlog_file12,
|
5887
|
-
L:
|
5832
|
+
L: 160,
|
5888
5833
|
S: void 0,
|
5889
5834
|
C: (f, a) => f(...a)
|
5890
5835
|
});
|
@@ -5895,7 +5840,7 @@ var editor = () => [
|
|
5895
5840
|
changes
|
5896
5841
|
}, {
|
5897
5842
|
F: __dxlog_file12,
|
5898
|
-
L:
|
5843
|
+
L: 171,
|
5899
5844
|
S: void 0,
|
5900
5845
|
C: (f, a) => f(...a)
|
5901
5846
|
});
|
@@ -5907,7 +5852,7 @@ var editor = () => [
|
|
5907
5852
|
} else if (cancel) {
|
5908
5853
|
log7("cancel", void 0, {
|
5909
5854
|
F: __dxlog_file12,
|
5910
|
-
L:
|
5855
|
+
L: 174,
|
5911
5856
|
S: void 0,
|
5912
5857
|
C: (f, a) => f(...a)
|
5913
5858
|
});
|
@@ -5918,7 +5863,7 @@ var editor = () => [
|
|
5918
5863
|
];
|
5919
5864
|
|
5920
5865
|
// packages/ui/react-ui-editor/src/extensions/outliner/outliner.ts
|
5921
|
-
var outliner = (
|
5866
|
+
var outliner = () => [
|
5922
5867
|
// Commands.
|
5923
5868
|
Prec2.highest(commands()),
|
5924
5869
|
// Selection.
|
@@ -5930,17 +5875,17 @@ var outliner = (options = {}) => [
|
|
5930
5875
|
// Floating menu.
|
5931
5876
|
floatingMenu(),
|
5932
5877
|
// Line decorations.
|
5933
|
-
decorations(
|
5878
|
+
decorations(),
|
5934
5879
|
// Default markdown decorations.
|
5935
5880
|
decorateMarkdown({
|
5936
5881
|
listPaddingLeft: 8
|
5937
5882
|
}),
|
5938
5883
|
// Researve space for menu.
|
5939
|
-
|
5884
|
+
EditorView19.contentAttributes.of({
|
5940
5885
|
class: "is-full !mr-[3rem]"
|
5941
5886
|
})
|
5942
5887
|
];
|
5943
|
-
var decorations = (
|
5888
|
+
var decorations = () => [
|
5944
5889
|
ViewPlugin12.fromClass(class {
|
5945
5890
|
constructor(view) {
|
5946
5891
|
this.decorations = Decoration9.none;
|
@@ -5976,7 +5921,7 @@ var decorations = (options) => [
|
|
5976
5921
|
decorations: (v) => v.decorations
|
5977
5922
|
}),
|
5978
5923
|
// Theme.
|
5979
|
-
|
5924
|
+
EditorView19.theme({
|
5980
5925
|
".cm-list-item": {
|
5981
5926
|
borderLeftWidth: "1px",
|
5982
5927
|
borderRightWidth: "1px",
|
@@ -5991,29 +5936,29 @@ var decorations = (options) => [
|
|
5991
5936
|
borderTopLeftRadius: "4px",
|
5992
5937
|
borderTopRightRadius: "4px",
|
5993
5938
|
paddingTop: "4px",
|
5994
|
-
marginTop: "
|
5939
|
+
marginTop: "8px"
|
5995
5940
|
},
|
5996
5941
|
".cm-list-item-end": {
|
5997
5942
|
borderBottomWidth: "1px",
|
5998
5943
|
borderBottomLeftRadius: "4px",
|
5999
5944
|
borderBottomRightRadius: "4px",
|
6000
5945
|
paddingBottom: "4px",
|
6001
|
-
marginBottom: "
|
5946
|
+
marginBottom: "8px"
|
6002
5947
|
},
|
6003
5948
|
".cm-list-item-selected": {
|
6004
|
-
borderColor:
|
5949
|
+
borderColor: "var(--dx-separator)"
|
6005
5950
|
},
|
6006
5951
|
".cm-list-item-focused": {
|
6007
5952
|
borderColor: "var(--dx-accentFocusIndicator)"
|
6008
5953
|
}
|
6009
|
-
})
|
5954
|
+
})
|
6010
5955
|
];
|
6011
5956
|
|
6012
5957
|
// packages/ui/react-ui-editor/src/extensions/preview/preview.ts
|
6013
5958
|
import "@dxos/lit-ui/dx-ref-tag.pcss";
|
6014
5959
|
import { syntaxTree as syntaxTree10 } from "@codemirror/language";
|
6015
5960
|
import { RangeSetBuilder as RangeSetBuilder6, StateField as StateField10 } from "@codemirror/state";
|
6016
|
-
import { Decoration as Decoration10, EditorView as
|
5961
|
+
import { Decoration as Decoration10, EditorView as EditorView20, WidgetType as WidgetType6 } from "@codemirror/view";
|
6017
5962
|
var preview = (options = {}) => {
|
6018
5963
|
return [
|
6019
5964
|
// NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
|
@@ -6022,11 +5967,11 @@ var preview = (options = {}) => {
|
|
6022
5967
|
create: (state) => buildDecorations3(state, options),
|
6023
5968
|
update: (_, tr) => buildDecorations3(tr.state, options),
|
6024
5969
|
provide: (field) => [
|
6025
|
-
|
6026
|
-
|
5970
|
+
EditorView20.decorations.from(field),
|
5971
|
+
EditorView20.atomicRanges.of((view) => view.state.field(field))
|
6027
5972
|
]
|
6028
5973
|
}),
|
6029
|
-
|
5974
|
+
EditorView20.theme({
|
6030
5975
|
".cm-preview-block": {
|
6031
5976
|
marginLeft: "-1rem",
|
6032
5977
|
marginRight: "-1rem",
|
@@ -6519,7 +6464,7 @@ var createViewMode = (state, onViewModeChange) => {
|
|
6519
6464
|
};
|
6520
6465
|
|
6521
6466
|
// packages/ui/react-ui-editor/src/defaults.ts
|
6522
|
-
import { EditorView as
|
6467
|
+
import { EditorView as EditorView21 } from "@codemirror/view";
|
6523
6468
|
import { mx as mx4 } from "@dxos/react-ui-theme";
|
6524
6469
|
var editorWidth = "!mli-auto is-full max-is-[min(50rem,100%-4rem)]";
|
6525
6470
|
var editorSlots = {
|
@@ -6530,12 +6475,12 @@ var editorSlots = {
|
|
6530
6475
|
className: editorWidth
|
6531
6476
|
}
|
6532
6477
|
};
|
6533
|
-
var editorGutter =
|
6478
|
+
var editorGutter = EditorView21.theme({
|
6534
6479
|
".cm-gutters": {
|
6535
6480
|
paddingRight: "1rem"
|
6536
6481
|
}
|
6537
6482
|
});
|
6538
|
-
var editorMonospace =
|
6483
|
+
var editorMonospace = EditorView21.theme({
|
6539
6484
|
".cm-content": {
|
6540
6485
|
fontFamily: fontMono
|
6541
6486
|
}
|
@@ -6787,7 +6732,7 @@ var RefDropdownMenu = {
|
|
6787
6732
|
|
6788
6733
|
// packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
|
6789
6734
|
import { EditorState as EditorState3 } from "@codemirror/state";
|
6790
|
-
import { EditorView as
|
6735
|
+
import { EditorView as EditorView22 } from "@codemirror/view";
|
6791
6736
|
import { useFocusableGroup } from "@fluentui/react-tabster";
|
6792
6737
|
import { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef3, useState as useState3 } from "react";
|
6793
6738
|
import { log as log8 } from "@dxos/log";
|
@@ -6831,7 +6776,7 @@ var useTextEditor = (props = {}, deps = []) => {
|
|
6831
6776
|
id && documentId.of(id),
|
6832
6777
|
extensions,
|
6833
6778
|
// NOTE: This doesn't catch errors in keymap functions.
|
6834
|
-
|
6779
|
+
EditorView22.exceptionSink.of((err) => {
|
6835
6780
|
log8.catch(err, void 0, {
|
6836
6781
|
F: __dxlog_file13,
|
6837
6782
|
L: 98,
|
@@ -6841,10 +6786,10 @@ var useTextEditor = (props = {}, deps = []) => {
|
|
6841
6786
|
})
|
6842
6787
|
].filter(isNotFalsy4)
|
6843
6788
|
});
|
6844
|
-
view2 = new
|
6789
|
+
view2 = new EditorView22({
|
6845
6790
|
parent: parentRef.current,
|
6846
6791
|
state,
|
6847
|
-
scrollTo: scrollTo ?
|
6792
|
+
scrollTo: scrollTo ? EditorView22.scrollIntoView(scrollTo, {
|
6848
6793
|
yMargin: 96
|
6849
6794
|
}) : void 0,
|
6850
6795
|
dispatchTransactions: debug ? debugDispatcher : void 0
|
@@ -6943,7 +6888,7 @@ export {
|
|
6943
6888
|
EditorInputModes,
|
6944
6889
|
EditorState4 as EditorState,
|
6945
6890
|
EditorToolbar,
|
6946
|
-
|
6891
|
+
EditorView23 as EditorView,
|
6947
6892
|
EditorViewMode,
|
6948
6893
|
EditorViewModes,
|
6949
6894
|
Inline,
|
@@ -6972,7 +6917,6 @@ export {
|
|
6972
6917
|
closeEffect,
|
6973
6918
|
command,
|
6974
6919
|
commandKeyBindings,
|
6975
|
-
commands,
|
6976
6920
|
commentClickedEffect,
|
6977
6921
|
comments,
|
6978
6922
|
commentsState,
|
@@ -6995,7 +6939,6 @@ export {
|
|
6995
6939
|
debugTree,
|
6996
6940
|
decorateMarkdown,
|
6997
6941
|
defaultOptions,
|
6998
|
-
deleteItem,
|
6999
6942
|
documentId,
|
7000
6943
|
dropFile,
|
7001
6944
|
editorGutter,
|
@@ -7015,8 +6958,6 @@ export {
|
|
7015
6958
|
getListItemContent,
|
7016
6959
|
getRange,
|
7017
6960
|
image,
|
7018
|
-
indentItemLess,
|
7019
|
-
indentItemMore,
|
7020
6961
|
insertTable,
|
7021
6962
|
itemToJSON,
|
7022
6963
|
keymap13 as keymap,
|
@@ -7029,8 +6970,6 @@ export {
|
|
7029
6970
|
markdownTagsExtensions,
|
7030
6971
|
matchCompletion,
|
7031
6972
|
mention,
|
7032
|
-
moveItemDown,
|
7033
|
-
moveItemUp,
|
7034
6973
|
openCommand,
|
7035
6974
|
openEffect,
|
7036
6975
|
outliner,
|
@@ -7067,7 +7006,6 @@ export {
|
|
7067
7006
|
toggleStrikethrough,
|
7068
7007
|
toggleStrong,
|
7069
7008
|
toggleStyle,
|
7070
|
-
toggleTask,
|
7071
7009
|
translations_default as translations,
|
7072
7010
|
traverse,
|
7073
7011
|
treeFacet,
|