@milkdown/crepe 7.11.1 → 7.12.0
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/lib/cjs/builder/builder.js +107 -0
- package/lib/cjs/builder/builder.js.map +1 -0
- package/lib/cjs/{index-CtTpZYVe.js → feature/block-edit/index.js} +165 -61
- package/lib/cjs/feature/block-edit/index.js.map +1 -0
- package/lib/cjs/feature/code-mirror/index.js +161 -0
- package/lib/cjs/feature/code-mirror/index.js.map +1 -0
- package/lib/cjs/feature/cursor/index.js +57 -0
- package/lib/cjs/feature/cursor/index.js.map +1 -0
- package/lib/cjs/feature/image-block/index.js +123 -0
- package/lib/cjs/feature/image-block/index.js.map +1 -0
- package/lib/cjs/{index-2icTTGim.js → feature/latex/index.js} +111 -24
- package/lib/cjs/feature/latex/index.js.map +1 -0
- package/lib/cjs/feature/link-tooltip/index.js +124 -0
- package/lib/cjs/feature/link-tooltip/index.js.map +1 -0
- package/lib/cjs/{index-Dw6lXgs6.js → feature/list-item/index.js} +39 -8
- package/lib/cjs/feature/list-item/index.js.map +1 -0
- package/lib/cjs/{index-B91KhPew.js → feature/placeholder/index.js} +46 -6
- package/lib/cjs/feature/placeholder/index.js.map +1 -0
- package/lib/cjs/{index-DEs_IHHy.js → feature/table/index.js} +78 -16
- package/lib/cjs/feature/table/index.js.map +1 -0
- package/lib/cjs/{index-k3lGvKiX.js → feature/toolbar/index.js} +133 -31
- package/lib/cjs/feature/toolbar/index.js.map +1 -0
- package/lib/cjs/index/index.js +2464 -0
- package/lib/cjs/index/index.js.map +1 -0
- package/lib/esm/builder/builder.js +105 -0
- package/lib/esm/builder/builder.js.map +1 -0
- package/lib/esm/{index-BEe1TpeS.js → feature/block-edit/index.js} +161 -57
- package/lib/esm/feature/block-edit/index.js.map +1 -0
- package/lib/esm/feature/code-mirror/index.js +159 -0
- package/lib/esm/feature/code-mirror/index.js.map +1 -0
- package/lib/esm/feature/cursor/index.js +55 -0
- package/lib/esm/feature/cursor/index.js.map +1 -0
- package/lib/esm/feature/image-block/index.js +121 -0
- package/lib/esm/feature/image-block/index.js.map +1 -0
- package/lib/esm/{index-ZGfGszIQ.js → feature/latex/index.js} +107 -20
- package/lib/esm/feature/latex/index.js.map +1 -0
- package/lib/esm/feature/link-tooltip/index.js +122 -0
- package/lib/esm/feature/link-tooltip/index.js.map +1 -0
- package/lib/esm/{index-E8UgFLeN.js → feature/list-item/index.js} +39 -8
- package/lib/esm/feature/list-item/index.js.map +1 -0
- package/lib/esm/{index-BCvtgOeI.js → feature/placeholder/index.js} +45 -5
- package/lib/esm/feature/placeholder/index.js.map +1 -0
- package/lib/esm/{index-CwMVnVeI.js → feature/table/index.js} +78 -16
- package/lib/esm/feature/table/index.js.map +1 -0
- package/lib/esm/{index-CTBg0aec.js → feature/toolbar/index.js} +128 -26
- package/lib/esm/feature/toolbar/index.js.map +1 -0
- package/lib/esm/index/index.js +2458 -0
- package/lib/esm/index/index.js.map +1 -0
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/types/builder.d.ts +2 -0
- package/lib/types/builder.d.ts.map +1 -0
- package/lib/types/core/builder.d.ts +23 -0
- package/lib/types/core/builder.d.ts.map +1 -0
- package/lib/types/core/crepe.d.ts +4 -15
- package/lib/types/core/crepe.d.ts.map +1 -1
- package/lib/types/core/index.d.ts +2 -1
- package/lib/types/core/index.d.ts.map +1 -1
- package/lib/types/core/slice.d.ts +6 -4
- package/lib/types/core/slice.d.ts.map +1 -1
- package/lib/types/default-config/index.d.ts +3 -0
- package/lib/types/default-config/index.d.ts.map +1 -0
- package/lib/types/feature/block-edit/handle/component.d.ts +2 -3
- package/lib/types/feature/block-edit/handle/component.d.ts.map +1 -1
- package/lib/types/feature/block-edit/index.d.ts +20 -20
- package/lib/types/feature/block-edit/index.d.ts.map +1 -1
- package/lib/types/feature/code-mirror/index.d.ts +7 -7
- package/lib/types/feature/code-mirror/index.d.ts.map +1 -1
- package/lib/types/feature/cursor/index.d.ts +1 -1
- package/lib/types/feature/cursor/index.d.ts.map +1 -1
- package/lib/types/feature/image-block/index.d.ts +9 -9
- package/lib/types/feature/image-block/index.d.ts.map +1 -1
- package/lib/types/feature/index.d.ts +2 -4
- package/lib/types/feature/index.d.ts.map +1 -1
- package/lib/types/feature/latex/index.d.ts +3 -3
- package/lib/types/feature/latex/index.d.ts.map +1 -1
- package/lib/types/feature/link-tooltip/index.d.ts +6 -6
- package/lib/types/feature/link-tooltip/index.d.ts.map +1 -1
- package/lib/types/feature/list-item/index.d.ts +5 -5
- package/lib/types/feature/list-item/index.d.ts.map +1 -1
- package/lib/types/feature/loader.d.ts +4 -0
- package/lib/types/feature/loader.d.ts.map +1 -0
- package/lib/types/feature/placeholder/index.d.ts +2 -2
- package/lib/types/feature/placeholder/index.d.ts.map +1 -1
- package/lib/types/feature/shared.d.ts +1 -2
- package/lib/types/feature/shared.d.ts.map +1 -1
- package/lib/types/feature/table/index.d.ts +11 -11
- package/lib/types/feature/table/index.d.ts.map +1 -1
- package/lib/types/feature/toolbar/index.d.ts +8 -8
- package/lib/types/feature/toolbar/index.d.ts.map +1 -1
- package/lib/types/icons/index.d.ts +1 -0
- package/lib/types/icons/index.d.ts.map +1 -1
- package/lib/types/index.d.ts +1 -1
- package/lib/types/index.d.ts.map +1 -1
- package/lib/types/utils/index.d.ts +0 -1
- package/lib/types/utils/index.d.ts.map +1 -1
- package/package.json +60 -3
- package/src/builder.ts +1 -0
- package/src/core/builder.ts +143 -0
- package/src/core/crepe.ts +14 -130
- package/src/core/index.ts +2 -1
- package/src/core/slice.ts +37 -8
- package/src/default-config/index.ts +25 -0
- package/src/feature/block-edit/handle/component.tsx +6 -8
- package/src/feature/block-edit/handle/index.ts +2 -2
- package/src/feature/block-edit/index.ts +23 -20
- package/src/feature/block-edit/menu/config.ts +19 -19
- package/src/feature/code-mirror/index.ts +32 -28
- package/src/feature/cursor/index.ts +10 -6
- package/src/feature/image-block/index.ts +19 -16
- package/src/feature/index.ts +2 -53
- package/src/feature/latex/index.ts +8 -10
- package/src/feature/latex/inline-tooltip/component.tsx +1 -1
- package/src/feature/link-tooltip/index.ts +13 -10
- package/src/feature/list-item/index.ts +11 -8
- package/src/feature/loader.ts +52 -0
- package/src/feature/placeholder/index.ts +5 -2
- package/src/feature/shared.ts +1 -3
- package/src/feature/table/index.ts +23 -23
- package/src/feature/toolbar/component.tsx +9 -9
- package/src/feature/toolbar/index.ts +14 -11
- package/src/icons/index.ts +1 -0
- package/src/index.ts +1 -1
- package/src/utils/index.ts +0 -8
- package/lib/cjs/confirm-CNveM9QH.js +0 -26
- package/lib/cjs/confirm-CNveM9QH.js.map +0 -1
- package/lib/cjs/edit-BUtBJHpV.js +0 -24
- package/lib/cjs/edit-BUtBJHpV.js.map +0 -1
- package/lib/cjs/functions-BAY51plB.js +0 -39
- package/lib/cjs/functions-BAY51plB.js.map +0 -1
- package/lib/cjs/image-BXLkOVnO.js +0 -24
- package/lib/cjs/image-BXLkOVnO.js.map +0 -1
- package/lib/cjs/index-2icTTGim.js.map +0 -1
- package/lib/cjs/index-B91KhPew.js.map +0 -1
- package/lib/cjs/index-BsrJn8Jp.js +0 -41
- package/lib/cjs/index-BsrJn8Jp.js.map +0 -1
- package/lib/cjs/index-C2CAbC2F.js +0 -26
- package/lib/cjs/index-C2CAbC2F.js.map +0 -1
- package/lib/cjs/index-CtTpZYVe.js.map +0 -1
- package/lib/cjs/index-DEs_IHHy.js.map +0 -1
- package/lib/cjs/index-DLIudQKW.js +0 -126
- package/lib/cjs/index-DLIudQKW.js.map +0 -1
- package/lib/cjs/index-Dw6lXgs6.js.map +0 -1
- package/lib/cjs/index-k3lGvKiX.js.map +0 -1
- package/lib/cjs/index-urTgNBfI.js +0 -202
- package/lib/cjs/index-urTgNBfI.js.map +0 -1
- package/lib/cjs/index-xbwf60wt.js +0 -15
- package/lib/cjs/index-xbwf60wt.js.map +0 -1
- package/lib/cjs/index-xbxqAqH2.js +0 -52
- package/lib/cjs/index-xbxqAqH2.js.map +0 -1
- package/lib/cjs/index.js +0 -20
- package/lib/cjs/index.js.map +0 -1
- package/lib/cjs/inline-latex-D0G71cGk.js +0 -54
- package/lib/cjs/inline-latex-D0G71cGk.js.map +0 -1
- package/lib/cjs/plus-XLomtlXf.js +0 -24
- package/lib/cjs/plus-XLomtlXf.js.map +0 -1
- package/lib/cjs/remove-Ba-ypwBf.js +0 -17
- package/lib/cjs/remove-Ba-ypwBf.js.map +0 -1
- package/lib/esm/confirm-DtE-HkVd.js +0 -24
- package/lib/esm/confirm-DtE-HkVd.js.map +0 -1
- package/lib/esm/edit-D--t_JAb.js +0 -22
- package/lib/esm/edit-D--t_JAb.js.map +0 -1
- package/lib/esm/functions-DlJPkGmE.js +0 -36
- package/lib/esm/functions-DlJPkGmE.js.map +0 -1
- package/lib/esm/image-DoB1o1sl.js +0 -22
- package/lib/esm/image-DoB1o1sl.js.map +0 -1
- package/lib/esm/index-BCvtgOeI.js.map +0 -1
- package/lib/esm/index-BEe1TpeS.js.map +0 -1
- package/lib/esm/index-BPG8iO8t.js +0 -12
- package/lib/esm/index-BPG8iO8t.js.map +0 -1
- package/lib/esm/index-BUBXHhHG.js +0 -39
- package/lib/esm/index-BUBXHhHG.js.map +0 -1
- package/lib/esm/index-Bvz1Yyiz.js +0 -24
- package/lib/esm/index-Bvz1Yyiz.js.map +0 -1
- package/lib/esm/index-C1aVAv1l.js +0 -124
- package/lib/esm/index-C1aVAv1l.js.map +0 -1
- package/lib/esm/index-CTBg0aec.js.map +0 -1
- package/lib/esm/index-ChR5Qhyf.js +0 -50
- package/lib/esm/index-ChR5Qhyf.js.map +0 -1
- package/lib/esm/index-CshFzSt2.js +0 -197
- package/lib/esm/index-CshFzSt2.js.map +0 -1
- package/lib/esm/index-CwMVnVeI.js.map +0 -1
- package/lib/esm/index-E8UgFLeN.js.map +0 -1
- package/lib/esm/index-ZGfGszIQ.js.map +0 -1
- package/lib/esm/index.js +0 -12
- package/lib/esm/index.js.map +0 -1
- package/lib/esm/inline-latex-C9IGAXXQ.js +0 -51
- package/lib/esm/inline-latex-C9IGAXXQ.js.map +0 -1
- package/lib/esm/plus-lrX0Q75O.js +0 -22
- package/lib/esm/plus-lrX0Q75O.js.map +0 -1
- package/lib/esm/remove-D3g0Cd6_.js +0 -15
- package/lib/esm/remove-D3g0Cd6_.js.map +0 -1
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
import { defaultKeymap, indentWithTab } from '@codemirror/commands';
|
|
2
|
+
import { keymap } from '@codemirror/view';
|
|
3
|
+
import { codeBlockConfig, codeBlockComponent } from '@milkdown/kit/component/code-block';
|
|
4
|
+
import { basicSetup } from 'codemirror';
|
|
5
|
+
import { createSlice } from '@milkdown/kit/ctx';
|
|
6
|
+
|
|
7
|
+
createSlice([], "FeaturesCtx");
|
|
8
|
+
createSlice({}, "CrepeCtx");
|
|
9
|
+
function useCrepeFeatures(ctx) {
|
|
10
|
+
return ctx.use("FeaturesCtx");
|
|
11
|
+
}
|
|
12
|
+
function crepeFeatureConfig(feature) {
|
|
13
|
+
return (ctx) => {
|
|
14
|
+
useCrepeFeatures(ctx).update((features) => {
|
|
15
|
+
if (features.includes(feature)) {
|
|
16
|
+
return features;
|
|
17
|
+
}
|
|
18
|
+
return [...features, feature];
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const chevronDownIcon = `
|
|
24
|
+
<svg
|
|
25
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
26
|
+
fill="none"
|
|
27
|
+
viewBox="0 0 24 24"
|
|
28
|
+
stroke-width="1.5"
|
|
29
|
+
stroke="currentColor"
|
|
30
|
+
class="w-6 h-6"
|
|
31
|
+
>
|
|
32
|
+
<path
|
|
33
|
+
stroke-linecap="round"
|
|
34
|
+
stroke-linejoin="round"
|
|
35
|
+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
|
|
36
|
+
/>
|
|
37
|
+
</svg>
|
|
38
|
+
`;
|
|
39
|
+
|
|
40
|
+
const clearIcon = `
|
|
41
|
+
<svg
|
|
42
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
43
|
+
width="24"
|
|
44
|
+
height="24"
|
|
45
|
+
viewBox="0 0 24 24"
|
|
46
|
+
>
|
|
47
|
+
<g clip-path="url(#clip0_1098_15553)">
|
|
48
|
+
<path
|
|
49
|
+
d="M18.3007 5.70973C17.9107 5.31973 17.2807 5.31973 16.8907 5.70973L12.0007 10.5897L7.1107 5.69973C6.7207 5.30973 6.0907 5.30973 5.7007 5.69973C5.3107 6.08973 5.3107 6.71973 5.7007 7.10973L10.5907 11.9997L5.7007 16.8897C5.3107 17.2797 5.3107 17.9097 5.7007 18.2997C6.0907 18.6897 6.7207 18.6897 7.1107 18.2997L12.0007 13.4097L16.8907 18.2997C17.2807 18.6897 17.9107 18.6897 18.3007 18.2997C18.6907 17.9097 18.6907 17.2797 18.3007 16.8897L13.4107 11.9997L18.3007 7.10973C18.6807 6.72973 18.6807 6.08973 18.3007 5.70973Z"
|
|
50
|
+
/>
|
|
51
|
+
</g>
|
|
52
|
+
<defs>
|
|
53
|
+
<clipPath id="clip0_1098_15553">
|
|
54
|
+
<rect width="24" height="24" />
|
|
55
|
+
</clipPath>
|
|
56
|
+
</defs>
|
|
57
|
+
</svg>
|
|
58
|
+
`;
|
|
59
|
+
|
|
60
|
+
const editIcon = `
|
|
61
|
+
<svg
|
|
62
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
63
|
+
width="24"
|
|
64
|
+
height="24"
|
|
65
|
+
viewBox="0 0 24 24"
|
|
66
|
+
>
|
|
67
|
+
<g clip-path="url(#clip0_1013_1585)">
|
|
68
|
+
<path
|
|
69
|
+
d="M14.06 9.02L14.98 9.94L5.92 19H5V18.08L14.06 9.02ZM17.66 3C17.41 3 17.15 3.1 16.96 3.29L15.13 5.12L18.88 8.87L20.71 7.04C21.1 6.65 21.1 6.02 20.71 5.63L18.37 3.29C18.17 3.09 17.92 3 17.66 3ZM14.06 6.19L3 17.25V21H6.75L17.81 9.94L14.06 6.19Z"
|
|
70
|
+
/>
|
|
71
|
+
</g>
|
|
72
|
+
<defs>
|
|
73
|
+
<clipPath id="clip0_1013_1585">
|
|
74
|
+
<rect width="24" height="24" />
|
|
75
|
+
</clipPath>
|
|
76
|
+
</defs>
|
|
77
|
+
</svg>
|
|
78
|
+
`;
|
|
79
|
+
|
|
80
|
+
const searchIcon = `
|
|
81
|
+
<svg
|
|
82
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
83
|
+
fill="none"
|
|
84
|
+
viewBox="0 0 24 24"
|
|
85
|
+
stroke-width="1.5"
|
|
86
|
+
stroke="currentColor"
|
|
87
|
+
class="w-6 h-6"
|
|
88
|
+
>
|
|
89
|
+
<path
|
|
90
|
+
stroke-linecap="round"
|
|
91
|
+
stroke-linejoin="round"
|
|
92
|
+
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
|
|
93
|
+
/>
|
|
94
|
+
</svg>
|
|
95
|
+
`;
|
|
96
|
+
|
|
97
|
+
const visibilityOffIcon = `
|
|
98
|
+
<svg
|
|
99
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
100
|
+
height="24px"
|
|
101
|
+
viewBox="0 -960 960 960"
|
|
102
|
+
width="24px"
|
|
103
|
+
>
|
|
104
|
+
<path
|
|
105
|
+
d="m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z"
|
|
106
|
+
/>
|
|
107
|
+
</svg>
|
|
108
|
+
`;
|
|
109
|
+
|
|
110
|
+
var CrepeFeature = /* @__PURE__ */ ((CrepeFeature2) => {
|
|
111
|
+
CrepeFeature2["CodeMirror"] = "code-mirror";
|
|
112
|
+
CrepeFeature2["ListItem"] = "list-item";
|
|
113
|
+
CrepeFeature2["LinkTooltip"] = "link-tooltip";
|
|
114
|
+
CrepeFeature2["Cursor"] = "cursor";
|
|
115
|
+
CrepeFeature2["ImageBlock"] = "image-block";
|
|
116
|
+
CrepeFeature2["BlockEdit"] = "block-edit";
|
|
117
|
+
CrepeFeature2["Toolbar"] = "toolbar";
|
|
118
|
+
CrepeFeature2["Placeholder"] = "placeholder";
|
|
119
|
+
CrepeFeature2["Table"] = "table";
|
|
120
|
+
CrepeFeature2["Latex"] = "latex";
|
|
121
|
+
return CrepeFeature2;
|
|
122
|
+
})(CrepeFeature || {});
|
|
123
|
+
|
|
124
|
+
const codeMirror = (editor, config = {}) => {
|
|
125
|
+
editor.config(crepeFeatureConfig(CrepeFeature.CodeMirror)).config((ctx) => {
|
|
126
|
+
const { languages = [], theme } = config;
|
|
127
|
+
const extensions = [
|
|
128
|
+
keymap.of(defaultKeymap.concat(indentWithTab)),
|
|
129
|
+
basicSetup
|
|
130
|
+
];
|
|
131
|
+
if (theme) {
|
|
132
|
+
extensions.push(theme);
|
|
133
|
+
}
|
|
134
|
+
if (config.extensions) {
|
|
135
|
+
extensions.push(...config.extensions);
|
|
136
|
+
}
|
|
137
|
+
ctx.update(codeBlockConfig.key, (defaultConfig) => ({
|
|
138
|
+
extensions,
|
|
139
|
+
languages,
|
|
140
|
+
expandIcon: config.expandIcon || chevronDownIcon,
|
|
141
|
+
searchIcon: config.searchIcon || searchIcon,
|
|
142
|
+
clearSearchIcon: config.clearSearchIcon || clearIcon,
|
|
143
|
+
searchPlaceholder: config.searchPlaceholder || "Search language",
|
|
144
|
+
noResultText: config.noResultText || "No result",
|
|
145
|
+
renderLanguage: config.renderLanguage || defaultConfig.renderLanguage,
|
|
146
|
+
renderPreview: config.renderPreview || defaultConfig.renderPreview,
|
|
147
|
+
previewToggleButton: (previewOnlyMode) => {
|
|
148
|
+
var _a, _b;
|
|
149
|
+
const icon = ((_a = config.previewToggleIcon) == null ? void 0 : _a.call(config, previewOnlyMode)) || (previewOnlyMode ? editIcon : visibilityOffIcon);
|
|
150
|
+
const text = ((_b = config.previewToggleText) == null ? void 0 : _b.call(config, previewOnlyMode)) || (previewOnlyMode ? "Edit" : "Hide");
|
|
151
|
+
return [icon, text].map((v) => v.trim()).join(" ");
|
|
152
|
+
},
|
|
153
|
+
previewLabel: config.previewLabel || defaultConfig.previewLabel
|
|
154
|
+
}));
|
|
155
|
+
}).use(codeBlockComponent);
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
export { codeMirror };
|
|
159
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/core/slice.ts","../../../../src/icons/chevron-down.ts","../../../../src/icons/clear.ts","../../../../src/icons/edit.ts","../../../../src/icons/search.ts","../../../../src/icons/visibility-off.ts","../../../../src/feature/index.ts","../../../../src/feature/code-mirror/index.ts"],"sourcesContent":["import { createSlice, type Ctx } from '@milkdown/kit/ctx'\n\nimport type { CrepeFeature } from '../feature'\nimport type { CrepeBuilder } from './builder'\n\n/// @internal\n/// The feature flags context.\n/// ⚠️ Most of the time, you should use `useCrepeFeatures` to get the features.\nexport const FeaturesCtx = createSlice([] as CrepeFeature[], 'FeaturesCtx')\n\n/// @internal\n/// The crepe editor context.\n/// ⚠️ Most of the time, you should use `useCrepe` to get the crepe editor instance.\nexport const CrepeCtx = createSlice({} as CrepeBuilder, 'CrepeCtx')\n\n/// The crepe editor context.\n/// You can use this context to access the crepe editor instance within Milkdown plugins.\n/// ```ts\n/// import { crepeCtx } from '@milkdown/crepe'\n/// const plugin = (ctx: Ctx) => {\n/// return () => {\n/// const crepe = useCrepe(ctx)\n/// crepe.setReadonly(true)\n/// }\n/// }\n/// ```\nexport function useCrepe(ctx: Ctx) {\n // We should use string slice here to avoid the slice to be bundled in multiple entries\n return ctx.get<CrepeBuilder, 'CrepeCtx'>('CrepeCtx')\n}\n\n/// Check the enabled FeatureFlags\n/// ```ts\n/// import { useCrepeFeatures } from '@milkdown/crepe'\n/// const plugin = (ctx: Ctx) => {\n/// const features = useCrepeFeatures(ctx)\n/// if (features.get().includes(CrepeFeature.CodeMirror)) {\n/// // Do something with CodeMirror\n/// }\n/// }\nexport function useCrepeFeatures(ctx: Ctx) {\n // We should use string slice here to avoid the slice to be bundled in multiple entries\n return ctx.use<CrepeFeature[], 'FeaturesCtx'>('FeaturesCtx')\n}\n\n/// @internal\nexport function crepeFeatureConfig(feature: CrepeFeature) {\n return (ctx: Ctx) => {\n useCrepeFeatures(ctx).update((features) => {\n if (features.includes(feature)) {\n return features\n }\n return [...features, feature]\n })\n }\n}\n","export const chevronDownIcon = `\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n class=\"w-6 h-6\"\n >\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\"\n />\n </svg>\n`\n","export const clearIcon = `\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n >\n <g clip-path=\"url(#clip0_1098_15553)\">\n <path\n d=\"M18.3007 5.70973C17.9107 5.31973 17.2807 5.31973 16.8907 5.70973L12.0007 10.5897L7.1107 5.69973C6.7207 5.30973 6.0907 5.30973 5.7007 5.69973C5.3107 6.08973 5.3107 6.71973 5.7007 7.10973L10.5907 11.9997L5.7007 16.8897C5.3107 17.2797 5.3107 17.9097 5.7007 18.2997C6.0907 18.6897 6.7207 18.6897 7.1107 18.2997L12.0007 13.4097L16.8907 18.2997C17.2807 18.6897 17.9107 18.6897 18.3007 18.2997C18.6907 17.9097 18.6907 17.2797 18.3007 16.8897L13.4107 11.9997L18.3007 7.10973C18.6807 6.72973 18.6807 6.08973 18.3007 5.70973Z\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_1098_15553\">\n <rect width=\"24\" height=\"24\" />\n </clipPath>\n </defs>\n </svg>\n`\n","export const editIcon = `\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n >\n <g clip-path=\"url(#clip0_1013_1585)\">\n <path\n d=\"M14.06 9.02L14.98 9.94L5.92 19H5V18.08L14.06 9.02ZM17.66 3C17.41 3 17.15 3.1 16.96 3.29L15.13 5.12L18.88 8.87L20.71 7.04C21.1 6.65 21.1 6.02 20.71 5.63L18.37 3.29C18.17 3.09 17.92 3 17.66 3ZM14.06 6.19L3 17.25V21H6.75L17.81 9.94L14.06 6.19Z\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_1013_1585\">\n <rect width=\"24\" height=\"24\" />\n </clipPath>\n </defs>\n </svg>\n`\n","export const searchIcon = `\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n class=\"w-6 h-6\"\n >\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n d=\"M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z\"\n />\n </svg>\n`\n","export const visibilityOffIcon = `\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 -960 960 960\"\n width=\"24px\"\n >\n <path\n d=\"m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z\"\n />\n </svg>\n`\n","import type { BlockEditFeatureConfig } from './block-edit'\nimport type { CodeMirrorFeatureConfig } from './code-mirror'\nimport type { CursorFeatureConfig } from './cursor'\nimport type { ImageBlockFeatureConfig } from './image-block'\nimport type { LatexFeatureConfig } from './latex'\nimport type { LinkTooltipFeatureConfig } from './link-tooltip'\nimport type { ListItemFeatureConfig } from './list-item'\nimport type { PlaceholderFeatureConfig } from './placeholder'\nimport type { TableFeatureConfig } from './table'\nimport type { ToolbarFeatureConfig } from './toolbar'\n\n/// The crepe editor feature flags.\n/// Every feature is enabled by default.\n/// Every feature is a string literal type.\nexport enum CrepeFeature {\n /// Syntax highlighting and editing for code blocks with language support, theme customization, and preview capabilities.\n CodeMirror = 'code-mirror',\n\n /// Support for bullet lists, ordered lists, and todo lists with customizable icons and formatting.\n ListItem = 'list-item',\n\n /// Enhanced link editing and preview with customizable tooltips, edit/remove actions, and copy functionality.\n LinkTooltip = 'link-tooltip',\n\n /// Enhanced cursor experience with drop cursor and gap cursor for better content placement.\n Cursor = 'cursor',\n\n /// Image upload and management with resizing, captions, and support for both inline and block images.\n ImageBlock = 'image-block',\n\n /// Drag-and-drop block management and slash commands for quick content insertion and organization.\n BlockEdit = 'block-edit',\n\n /// Formatting toolbar for selected text with customizable icons and actions.\n Toolbar = 'toolbar',\n\n /// Document or block level placeholders to guide users when content is empty.\n Placeholder = 'placeholder',\n\n /// Full-featured table editing with row/column management, alignment options, and drag-and-drop functionality.\n Table = 'table',\n\n /// Mathematical formula support with both inline and block math rendering using KaTeX.\n Latex = 'latex',\n}\n\nexport interface CrepeFeatureConfig {\n [CrepeFeature.Cursor]?: CursorFeatureConfig\n [CrepeFeature.ListItem]?: ListItemFeatureConfig\n [CrepeFeature.LinkTooltip]?: LinkTooltipFeatureConfig\n [CrepeFeature.ImageBlock]?: ImageBlockFeatureConfig\n [CrepeFeature.BlockEdit]?: BlockEditFeatureConfig\n [CrepeFeature.Placeholder]?: PlaceholderFeatureConfig\n [CrepeFeature.Toolbar]?: ToolbarFeatureConfig\n [CrepeFeature.CodeMirror]?: CodeMirrorFeatureConfig\n [CrepeFeature.Table]?: TableFeatureConfig\n [CrepeFeature.Latex]?: LatexFeatureConfig\n}\n\nexport const defaultFeatures: Record<CrepeFeature, boolean> = {\n [CrepeFeature.Cursor]: true,\n [CrepeFeature.ListItem]: true,\n [CrepeFeature.LinkTooltip]: true,\n [CrepeFeature.ImageBlock]: true,\n [CrepeFeature.BlockEdit]: true,\n [CrepeFeature.Placeholder]: true,\n [CrepeFeature.Toolbar]: true,\n [CrepeFeature.CodeMirror]: true,\n [CrepeFeature.Table]: true,\n [CrepeFeature.Latex]: true,\n}\n","import type { LanguageDescription } from '@codemirror/language'\nimport type { Extension } from '@codemirror/state'\n\nimport { defaultKeymap, indentWithTab } from '@codemirror/commands'\nimport { keymap } from '@codemirror/view'\nimport {\n codeBlockComponent,\n codeBlockConfig,\n} from '@milkdown/kit/component/code-block'\nimport { basicSetup } from 'codemirror'\n\nimport type { DefineFeature } from '../shared'\n\nimport { crepeFeatureConfig } from '../../core/slice'\nimport {\n chevronDownIcon,\n clearIcon,\n editIcon,\n searchIcon,\n visibilityOffIcon,\n} from '../../icons'\nimport { CrepeFeature } from '../index'\n\ninterface CodeMirrorConfig {\n extensions: Extension[]\n languages: LanguageDescription[]\n theme: Extension\n\n expandIcon: string\n searchIcon: string\n clearSearchIcon: string\n\n searchPlaceholder: string\n noResultText: string\n\n renderLanguage: (language: string, selected: boolean) => string\n\n renderPreview: (\n language: string,\n content: string\n ) => string | HTMLElement | null\n\n previewToggleIcon: (previewOnlyMode: boolean) => string\n previewToggleText: (previewOnlyMode: boolean) => string\n previewLabel: string\n}\nexport type CodeMirrorFeatureConfig = Partial<CodeMirrorConfig>\n\nexport const codeMirror: DefineFeature<CodeMirrorFeatureConfig> = (\n editor,\n config = {}\n) => {\n editor\n .config(crepeFeatureConfig(CrepeFeature.CodeMirror))\n .config((ctx) => {\n const { languages = [], theme } = config\n const extensions = [\n keymap.of(defaultKeymap.concat(indentWithTab)),\n basicSetup,\n ]\n if (theme) {\n extensions.push(theme)\n }\n if (config.extensions) {\n extensions.push(...config.extensions)\n }\n\n ctx.update(codeBlockConfig.key, (defaultConfig) => ({\n extensions,\n languages,\n\n expandIcon: config.expandIcon || chevronDownIcon,\n searchIcon: config.searchIcon || searchIcon,\n clearSearchIcon: config.clearSearchIcon || clearIcon,\n searchPlaceholder: config.searchPlaceholder || 'Search language',\n noResultText: config.noResultText || 'No result',\n renderLanguage: config.renderLanguage || defaultConfig.renderLanguage,\n renderPreview: config.renderPreview || defaultConfig.renderPreview,\n previewToggleButton: (previewOnlyMode) => {\n const icon =\n config.previewToggleIcon?.(previewOnlyMode) ||\n (previewOnlyMode ? editIcon : visibilityOffIcon)\n const text =\n config.previewToggleText?.(previewOnlyMode) ||\n (previewOnlyMode ? 'Edit' : 'Hide')\n return [icon, text].map((v) => v.trim()).join(' ')\n },\n previewLabel: config.previewLabel || defaultConfig.previewLabel,\n }))\n })\n .use(codeBlockComponent)\n}\n"],"names":["CrepeFeature"],"mappings":"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"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { dropCursorConfig, cursor as cursor$1 } from '@milkdown/kit/plugin/cursor';
|
|
2
|
+
import { $prose } from '@milkdown/kit/utils';
|
|
3
|
+
import { createVirtualCursor } from 'prosemirror-virtual-cursor';
|
|
4
|
+
import { createSlice } from '@milkdown/kit/ctx';
|
|
5
|
+
|
|
6
|
+
createSlice([], "FeaturesCtx");
|
|
7
|
+
createSlice({}, "CrepeCtx");
|
|
8
|
+
function useCrepeFeatures(ctx) {
|
|
9
|
+
return ctx.use("FeaturesCtx");
|
|
10
|
+
}
|
|
11
|
+
function crepeFeatureConfig(feature) {
|
|
12
|
+
return (ctx) => {
|
|
13
|
+
useCrepeFeatures(ctx).update((features) => {
|
|
14
|
+
if (features.includes(feature)) {
|
|
15
|
+
return features;
|
|
16
|
+
}
|
|
17
|
+
return [...features, feature];
|
|
18
|
+
});
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
var CrepeFeature = /* @__PURE__ */ ((CrepeFeature2) => {
|
|
23
|
+
CrepeFeature2["CodeMirror"] = "code-mirror";
|
|
24
|
+
CrepeFeature2["ListItem"] = "list-item";
|
|
25
|
+
CrepeFeature2["LinkTooltip"] = "link-tooltip";
|
|
26
|
+
CrepeFeature2["Cursor"] = "cursor";
|
|
27
|
+
CrepeFeature2["ImageBlock"] = "image-block";
|
|
28
|
+
CrepeFeature2["BlockEdit"] = "block-edit";
|
|
29
|
+
CrepeFeature2["Toolbar"] = "toolbar";
|
|
30
|
+
CrepeFeature2["Placeholder"] = "placeholder";
|
|
31
|
+
CrepeFeature2["Table"] = "table";
|
|
32
|
+
CrepeFeature2["Latex"] = "latex";
|
|
33
|
+
return CrepeFeature2;
|
|
34
|
+
})(CrepeFeature || {});
|
|
35
|
+
|
|
36
|
+
const cursor = (editor, config) => {
|
|
37
|
+
editor.config(crepeFeatureConfig(CrepeFeature.Cursor)).config((ctx) => {
|
|
38
|
+
ctx.update(dropCursorConfig.key, () => {
|
|
39
|
+
var _a, _b;
|
|
40
|
+
return {
|
|
41
|
+
class: "crepe-drop-cursor",
|
|
42
|
+
width: (_a = config == null ? void 0 : config.width) != null ? _a : 4,
|
|
43
|
+
color: (_b = config == null ? void 0 : config.color) != null ? _b : false
|
|
44
|
+
};
|
|
45
|
+
});
|
|
46
|
+
}).use(cursor$1);
|
|
47
|
+
if ((config == null ? void 0 : config.virtual) === false) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
const virtualCursor = createVirtualCursor();
|
|
51
|
+
editor.use($prose(() => virtualCursor));
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
export { cursor };
|
|
55
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/core/slice.ts","../../../../src/feature/index.ts","../../../../src/feature/cursor/index.ts"],"sourcesContent":["import { createSlice, type Ctx } from '@milkdown/kit/ctx'\n\nimport type { CrepeFeature } from '../feature'\nimport type { CrepeBuilder } from './builder'\n\n/// @internal\n/// The feature flags context.\n/// ⚠️ Most of the time, you should use `useCrepeFeatures` to get the features.\nexport const FeaturesCtx = createSlice([] as CrepeFeature[], 'FeaturesCtx')\n\n/// @internal\n/// The crepe editor context.\n/// ⚠️ Most of the time, you should use `useCrepe` to get the crepe editor instance.\nexport const CrepeCtx = createSlice({} as CrepeBuilder, 'CrepeCtx')\n\n/// The crepe editor context.\n/// You can use this context to access the crepe editor instance within Milkdown plugins.\n/// ```ts\n/// import { crepeCtx } from '@milkdown/crepe'\n/// const plugin = (ctx: Ctx) => {\n/// return () => {\n/// const crepe = useCrepe(ctx)\n/// crepe.setReadonly(true)\n/// }\n/// }\n/// ```\nexport function useCrepe(ctx: Ctx) {\n // We should use string slice here to avoid the slice to be bundled in multiple entries\n return ctx.get<CrepeBuilder, 'CrepeCtx'>('CrepeCtx')\n}\n\n/// Check the enabled FeatureFlags\n/// ```ts\n/// import { useCrepeFeatures } from '@milkdown/crepe'\n/// const plugin = (ctx: Ctx) => {\n/// const features = useCrepeFeatures(ctx)\n/// if (features.get().includes(CrepeFeature.CodeMirror)) {\n/// // Do something with CodeMirror\n/// }\n/// }\nexport function useCrepeFeatures(ctx: Ctx) {\n // We should use string slice here to avoid the slice to be bundled in multiple entries\n return ctx.use<CrepeFeature[], 'FeaturesCtx'>('FeaturesCtx')\n}\n\n/// @internal\nexport function crepeFeatureConfig(feature: CrepeFeature) {\n return (ctx: Ctx) => {\n useCrepeFeatures(ctx).update((features) => {\n if (features.includes(feature)) {\n return features\n }\n return [...features, feature]\n })\n }\n}\n","import type { BlockEditFeatureConfig } from './block-edit'\nimport type { CodeMirrorFeatureConfig } from './code-mirror'\nimport type { CursorFeatureConfig } from './cursor'\nimport type { ImageBlockFeatureConfig } from './image-block'\nimport type { LatexFeatureConfig } from './latex'\nimport type { LinkTooltipFeatureConfig } from './link-tooltip'\nimport type { ListItemFeatureConfig } from './list-item'\nimport type { PlaceholderFeatureConfig } from './placeholder'\nimport type { TableFeatureConfig } from './table'\nimport type { ToolbarFeatureConfig } from './toolbar'\n\n/// The crepe editor feature flags.\n/// Every feature is enabled by default.\n/// Every feature is a string literal type.\nexport enum CrepeFeature {\n /// Syntax highlighting and editing for code blocks with language support, theme customization, and preview capabilities.\n CodeMirror = 'code-mirror',\n\n /// Support for bullet lists, ordered lists, and todo lists with customizable icons and formatting.\n ListItem = 'list-item',\n\n /// Enhanced link editing and preview with customizable tooltips, edit/remove actions, and copy functionality.\n LinkTooltip = 'link-tooltip',\n\n /// Enhanced cursor experience with drop cursor and gap cursor for better content placement.\n Cursor = 'cursor',\n\n /// Image upload and management with resizing, captions, and support for both inline and block images.\n ImageBlock = 'image-block',\n\n /// Drag-and-drop block management and slash commands for quick content insertion and organization.\n BlockEdit = 'block-edit',\n\n /// Formatting toolbar for selected text with customizable icons and actions.\n Toolbar = 'toolbar',\n\n /// Document or block level placeholders to guide users when content is empty.\n Placeholder = 'placeholder',\n\n /// Full-featured table editing with row/column management, alignment options, and drag-and-drop functionality.\n Table = 'table',\n\n /// Mathematical formula support with both inline and block math rendering using KaTeX.\n Latex = 'latex',\n}\n\nexport interface CrepeFeatureConfig {\n [CrepeFeature.Cursor]?: CursorFeatureConfig\n [CrepeFeature.ListItem]?: ListItemFeatureConfig\n [CrepeFeature.LinkTooltip]?: LinkTooltipFeatureConfig\n [CrepeFeature.ImageBlock]?: ImageBlockFeatureConfig\n [CrepeFeature.BlockEdit]?: BlockEditFeatureConfig\n [CrepeFeature.Placeholder]?: PlaceholderFeatureConfig\n [CrepeFeature.Toolbar]?: ToolbarFeatureConfig\n [CrepeFeature.CodeMirror]?: CodeMirrorFeatureConfig\n [CrepeFeature.Table]?: TableFeatureConfig\n [CrepeFeature.Latex]?: LatexFeatureConfig\n}\n\nexport const defaultFeatures: Record<CrepeFeature, boolean> = {\n [CrepeFeature.Cursor]: true,\n [CrepeFeature.ListItem]: true,\n [CrepeFeature.LinkTooltip]: true,\n [CrepeFeature.ImageBlock]: true,\n [CrepeFeature.BlockEdit]: true,\n [CrepeFeature.Placeholder]: true,\n [CrepeFeature.Toolbar]: true,\n [CrepeFeature.CodeMirror]: true,\n [CrepeFeature.Table]: true,\n [CrepeFeature.Latex]: true,\n}\n","import {\n cursor as cursorPlugin,\n dropCursorConfig,\n} from '@milkdown/kit/plugin/cursor'\nimport { $prose } from '@milkdown/kit/utils'\nimport { createVirtualCursor } from 'prosemirror-virtual-cursor'\n\nimport type { DefineFeature } from '../shared'\n\nimport { crepeFeatureConfig } from '../../core/slice'\nimport { CrepeFeature } from '../index'\n\ninterface CursorConfig {\n color: string | false\n width: number\n virtual: boolean\n}\nexport type CursorFeatureConfig = Partial<CursorConfig>\n\nexport const cursor: DefineFeature<CursorFeatureConfig> = (editor, config) => {\n editor\n .config(crepeFeatureConfig(CrepeFeature.Cursor))\n .config((ctx) => {\n ctx.update(dropCursorConfig.key, () => ({\n class: 'crepe-drop-cursor',\n width: config?.width ?? 4,\n color: config?.color ?? false,\n }))\n })\n .use(cursorPlugin)\n\n if (config?.virtual === false) {\n return\n }\n\n const virtualCursor = createVirtualCursor()\n editor.use($prose(() => virtualCursor))\n}\n"],"names":["CrepeFeature","cursorPlugin"],"mappings":";;;;;AAQ2B,WAAA,CAAY,EAAC,EAAqB,aAAa;AAKlD,WAAA,CAAY,EAAC,EAAmB,UAAU;AA2B3D,SAAS,iBAAiB,GAAU,EAAA;AAEzC,EAAO,OAAA,GAAA,CAAI,IAAmC,aAAa,CAAA;AAC7D;AAGO,SAAS,mBAAmB,OAAuB,EAAA;AACxD,EAAA,OAAO,CAAC,GAAa,KAAA;AACnB,IAAA,gBAAA,CAAiB,GAAG,CAAA,CAAE,MAAO,CAAA,CAAC,QAAa,KAAA;AACzC,MAAI,IAAA,QAAA,CAAS,QAAS,CAAA,OAAO,CAAG,EAAA;AAC9B,QAAO,OAAA,QAAA;AAAA;AAET,MAAO,OAAA,CAAC,GAAG,QAAA,EAAU,OAAO,CAAA;AAAA,KAC7B,CAAA;AAAA,GACH;AACF;;ACzCY,IAAA,YAAA,qBAAAA,aAAL,KAAA;AAEL,EAAAA,cAAA,YAAa,CAAA,GAAA,aAAA;AAGb,EAAAA,cAAA,UAAW,CAAA,GAAA,WAAA;AAGX,EAAAA,cAAA,aAAc,CAAA,GAAA,cAAA;AAGd,EAAAA,cAAA,QAAS,CAAA,GAAA,QAAA;AAGT,EAAAA,cAAA,YAAa,CAAA,GAAA,aAAA;AAGb,EAAAA,cAAA,WAAY,CAAA,GAAA,YAAA;AAGZ,EAAAA,cAAA,SAAU,CAAA,GAAA,SAAA;AAGV,EAAAA,cAAA,aAAc,CAAA,GAAA,aAAA;AAGd,EAAAA,cAAA,OAAQ,CAAA,GAAA,OAAA;AAGR,EAAAA,cAAA,OAAQ,CAAA,GAAA,OAAA;AA7BE,EAAAA,OAAAA,aAAAA;AAAA,CAAA,EAAA,YAAA,IAAA,EAAA,CAAA;;ACKC,MAAA,MAAA,GAA6C,CAAC,MAAA,EAAQ,MAAW,KAAA;AAC5E,EACG,MAAA,CAAA,MAAA,CAAO,mBAAmB,YAAa,CAAA,MAAM,CAAC,CAC9C,CAAA,MAAA,CAAO,CAAC,GAAQ,KAAA;AACf,IAAI,GAAA,CAAA,MAAA,CAAO,gBAAiB,CAAA,GAAA,EAAK,MAAG;AAvB1C,MAAA,IAAA,EAAA,EAAA,EAAA;AAuB8C,MAAA,OAAA;AAAA,QACtC,KAAO,EAAA,mBAAA;AAAA,QACP,KAAA,EAAA,CAAO,EAAQ,GAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAA,KAAA,KAAR,IAAiB,GAAA,EAAA,GAAA,CAAA;AAAA,QACxB,KAAA,EAAA,CAAO,EAAQ,GAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAA,KAAA,KAAR,IAAiB,GAAA,EAAA,GAAA;AAAA,OAC1B;AAAA,KAAE,CAAA;AAAA,GACH,CACA,CAAA,GAAA,CAAIC,QAAY,CAAA;AAEnB,EAAI,IAAA,CAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAQ,aAAY,KAAO,EAAA;AAC7B,IAAA;AAAA;AAGF,EAAA,MAAM,gBAAgB,mBAAoB,EAAA;AAC1C,EAAA,MAAA,CAAO,GAAI,CAAA,MAAA,CAAO,MAAM,aAAa,CAAC,CAAA;AACxC;;;;"}
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import { imageBlockConfig, imageBlockComponent } from '@milkdown/kit/component/image-block';
|
|
2
|
+
import { inlineImageConfig, imageInlineComponent } from '@milkdown/kit/component/image-inline';
|
|
3
|
+
import { createSlice } from '@milkdown/kit/ctx';
|
|
4
|
+
|
|
5
|
+
createSlice([], "FeaturesCtx");
|
|
6
|
+
createSlice({}, "CrepeCtx");
|
|
7
|
+
function useCrepeFeatures(ctx) {
|
|
8
|
+
return ctx.use("FeaturesCtx");
|
|
9
|
+
}
|
|
10
|
+
function crepeFeatureConfig(feature) {
|
|
11
|
+
return (ctx) => {
|
|
12
|
+
useCrepeFeatures(ctx).update((features) => {
|
|
13
|
+
if (features.includes(feature)) {
|
|
14
|
+
return features;
|
|
15
|
+
}
|
|
16
|
+
return [...features, feature];
|
|
17
|
+
});
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const captionIcon = `
|
|
22
|
+
<svg
|
|
23
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
24
|
+
width="32"
|
|
25
|
+
height="32"
|
|
26
|
+
viewBox="0 0 24 24"
|
|
27
|
+
>
|
|
28
|
+
<path
|
|
29
|
+
fill="currentColor"
|
|
30
|
+
d="M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29zm1-6v3.08L13.08 16H20V4H4v12z"
|
|
31
|
+
/>
|
|
32
|
+
</svg>
|
|
33
|
+
`;
|
|
34
|
+
|
|
35
|
+
const confirmIcon = `
|
|
36
|
+
<svg
|
|
37
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
38
|
+
width="24"
|
|
39
|
+
height="24"
|
|
40
|
+
viewBox="0 0 24 24"
|
|
41
|
+
fill="none"
|
|
42
|
+
>
|
|
43
|
+
<g clip-path="url(#clip0_1013_1606)">
|
|
44
|
+
<path
|
|
45
|
+
d="M9.00012 16.1998L5.50012 12.6998C5.11012 12.3098 4.49012 12.3098 4.10012 12.6998C3.71012 13.0898 3.71012 13.7098 4.10012 14.0998L8.29012 18.2898C8.68012 18.6798 9.31012 18.6798 9.70012 18.2898L20.3001 7.69982C20.6901 7.30982 20.6901 6.68982 20.3001 6.29982C19.9101 5.90982 19.2901 5.90982 18.9001 6.29982L9.00012 16.1998Z"
|
|
46
|
+
fill="#817567"
|
|
47
|
+
/>
|
|
48
|
+
</g>
|
|
49
|
+
<defs>
|
|
50
|
+
<clipPath id="clip0_1013_1606">
|
|
51
|
+
<rect width="24" height="24" />
|
|
52
|
+
</clipPath>
|
|
53
|
+
</defs>
|
|
54
|
+
</svg>
|
|
55
|
+
`;
|
|
56
|
+
|
|
57
|
+
const imageIcon = `
|
|
58
|
+
<svg
|
|
59
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
60
|
+
width="24"
|
|
61
|
+
height="24"
|
|
62
|
+
viewBox="0 0 24 24"
|
|
63
|
+
>
|
|
64
|
+
<g clip-path="url(#clip0_977_8075)">
|
|
65
|
+
<path
|
|
66
|
+
d="M19 5V19H5V5H19ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM14.14 11.86L11.14 15.73L9 13.14L6 17H18L14.14 11.86Z"
|
|
67
|
+
/>
|
|
68
|
+
</g>
|
|
69
|
+
<defs>
|
|
70
|
+
<clipPath id="clip0_977_8075">
|
|
71
|
+
<rect width="24" height="24" />
|
|
72
|
+
</clipPath>
|
|
73
|
+
</defs>
|
|
74
|
+
</svg>
|
|
75
|
+
`;
|
|
76
|
+
|
|
77
|
+
var CrepeFeature = /* @__PURE__ */ ((CrepeFeature2) => {
|
|
78
|
+
CrepeFeature2["CodeMirror"] = "code-mirror";
|
|
79
|
+
CrepeFeature2["ListItem"] = "list-item";
|
|
80
|
+
CrepeFeature2["LinkTooltip"] = "link-tooltip";
|
|
81
|
+
CrepeFeature2["Cursor"] = "cursor";
|
|
82
|
+
CrepeFeature2["ImageBlock"] = "image-block";
|
|
83
|
+
CrepeFeature2["BlockEdit"] = "block-edit";
|
|
84
|
+
CrepeFeature2["Toolbar"] = "toolbar";
|
|
85
|
+
CrepeFeature2["Placeholder"] = "placeholder";
|
|
86
|
+
CrepeFeature2["Table"] = "table";
|
|
87
|
+
CrepeFeature2["Latex"] = "latex";
|
|
88
|
+
return CrepeFeature2;
|
|
89
|
+
})(CrepeFeature || {});
|
|
90
|
+
|
|
91
|
+
const imageBlock = (editor, config) => {
|
|
92
|
+
editor.config(crepeFeatureConfig(CrepeFeature.ImageBlock)).config((ctx) => {
|
|
93
|
+
ctx.update(inlineImageConfig.key, (value) => {
|
|
94
|
+
var _a, _b, _c, _d, _e, _f;
|
|
95
|
+
return {
|
|
96
|
+
uploadButton: (_a = config == null ? void 0 : config.inlineUploadButton) != null ? _a : "Upload",
|
|
97
|
+
imageIcon: (_b = config == null ? void 0 : config.inlineImageIcon) != null ? _b : imageIcon,
|
|
98
|
+
confirmButton: (_c = config == null ? void 0 : config.inlineConfirmButton) != null ? _c : confirmIcon,
|
|
99
|
+
uploadPlaceholderText: (_d = config == null ? void 0 : config.inlineUploadPlaceholderText) != null ? _d : "or paste link",
|
|
100
|
+
onUpload: (_f = (_e = config == null ? void 0 : config.inlineOnUpload) != null ? _e : config == null ? void 0 : config.onUpload) != null ? _f : value.onUpload,
|
|
101
|
+
proxyDomURL: config == null ? void 0 : config.proxyDomURL
|
|
102
|
+
};
|
|
103
|
+
});
|
|
104
|
+
ctx.update(imageBlockConfig.key, (value) => {
|
|
105
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
106
|
+
return {
|
|
107
|
+
uploadButton: (_a = config == null ? void 0 : config.blockUploadButton) != null ? _a : "Upload file",
|
|
108
|
+
imageIcon: (_b = config == null ? void 0 : config.blockImageIcon) != null ? _b : imageIcon,
|
|
109
|
+
captionIcon: (_c = config == null ? void 0 : config.blockCaptionIcon) != null ? _c : captionIcon,
|
|
110
|
+
confirmButton: (_d = config == null ? void 0 : config.blockConfirmButton) != null ? _d : "Confirm",
|
|
111
|
+
captionPlaceholderText: (_e = config == null ? void 0 : config.blockCaptionPlaceholderText) != null ? _e : "Write Image Caption",
|
|
112
|
+
uploadPlaceholderText: (_f = config == null ? void 0 : config.blockUploadPlaceholderText) != null ? _f : "or paste link",
|
|
113
|
+
onUpload: (_h = (_g = config == null ? void 0 : config.blockOnUpload) != null ? _g : config == null ? void 0 : config.onUpload) != null ? _h : value.onUpload,
|
|
114
|
+
proxyDomURL: config == null ? void 0 : config.proxyDomURL
|
|
115
|
+
};
|
|
116
|
+
});
|
|
117
|
+
}).use(imageBlockComponent).use(imageInlineComponent);
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
export { imageBlock };
|
|
121
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/core/slice.ts","../../../../src/icons/caption.ts","../../../../src/icons/confirm.ts","../../../../src/icons/image.ts","../../../../src/feature/index.ts","../../../../src/feature/image-block/index.ts"],"sourcesContent":["import { createSlice, type Ctx } from '@milkdown/kit/ctx'\n\nimport type { CrepeFeature } from '../feature'\nimport type { CrepeBuilder } from './builder'\n\n/// @internal\n/// The feature flags context.\n/// ⚠️ Most of the time, you should use `useCrepeFeatures` to get the features.\nexport const FeaturesCtx = createSlice([] as CrepeFeature[], 'FeaturesCtx')\n\n/// @internal\n/// The crepe editor context.\n/// ⚠️ Most of the time, you should use `useCrepe` to get the crepe editor instance.\nexport const CrepeCtx = createSlice({} as CrepeBuilder, 'CrepeCtx')\n\n/// The crepe editor context.\n/// You can use this context to access the crepe editor instance within Milkdown plugins.\n/// ```ts\n/// import { crepeCtx } from '@milkdown/crepe'\n/// const plugin = (ctx: Ctx) => {\n/// return () => {\n/// const crepe = useCrepe(ctx)\n/// crepe.setReadonly(true)\n/// }\n/// }\n/// ```\nexport function useCrepe(ctx: Ctx) {\n // We should use string slice here to avoid the slice to be bundled in multiple entries\n return ctx.get<CrepeBuilder, 'CrepeCtx'>('CrepeCtx')\n}\n\n/// Check the enabled FeatureFlags\n/// ```ts\n/// import { useCrepeFeatures } from '@milkdown/crepe'\n/// const plugin = (ctx: Ctx) => {\n/// const features = useCrepeFeatures(ctx)\n/// if (features.get().includes(CrepeFeature.CodeMirror)) {\n/// // Do something with CodeMirror\n/// }\n/// }\nexport function useCrepeFeatures(ctx: Ctx) {\n // We should use string slice here to avoid the slice to be bundled in multiple entries\n return ctx.use<CrepeFeature[], 'FeaturesCtx'>('FeaturesCtx')\n}\n\n/// @internal\nexport function crepeFeatureConfig(feature: CrepeFeature) {\n return (ctx: Ctx) => {\n useCrepeFeatures(ctx).update((features) => {\n if (features.includes(feature)) {\n return features\n }\n return [...features, feature]\n })\n }\n}\n","export const captionIcon = `\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 24 24\"\n >\n <path\n fill=\"currentColor\"\n d=\"M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29zm1-6v3.08L13.08 16H20V4H4v12z\"\n />\n </svg>\n`\n","export const confirmIcon = `\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <g clip-path=\"url(#clip0_1013_1606)\">\n <path\n d=\"M9.00012 16.1998L5.50012 12.6998C5.11012 12.3098 4.49012 12.3098 4.10012 12.6998C3.71012 13.0898 3.71012 13.7098 4.10012 14.0998L8.29012 18.2898C8.68012 18.6798 9.31012 18.6798 9.70012 18.2898L20.3001 7.69982C20.6901 7.30982 20.6901 6.68982 20.3001 6.29982C19.9101 5.90982 19.2901 5.90982 18.9001 6.29982L9.00012 16.1998Z\"\n fill=\"#817567\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_1013_1606\">\n <rect width=\"24\" height=\"24\" />\n </clipPath>\n </defs>\n </svg>\n`\n","export const imageIcon = `\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n >\n <g clip-path=\"url(#clip0_977_8075)\">\n <path\n d=\"M19 5V19H5V5H19ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM14.14 11.86L11.14 15.73L9 13.14L6 17H18L14.14 11.86Z\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_977_8075\">\n <rect width=\"24\" height=\"24\" />\n </clipPath>\n </defs>\n </svg>\n`\n","import type { BlockEditFeatureConfig } from './block-edit'\nimport type { CodeMirrorFeatureConfig } from './code-mirror'\nimport type { CursorFeatureConfig } from './cursor'\nimport type { ImageBlockFeatureConfig } from './image-block'\nimport type { LatexFeatureConfig } from './latex'\nimport type { LinkTooltipFeatureConfig } from './link-tooltip'\nimport type { ListItemFeatureConfig } from './list-item'\nimport type { PlaceholderFeatureConfig } from './placeholder'\nimport type { TableFeatureConfig } from './table'\nimport type { ToolbarFeatureConfig } from './toolbar'\n\n/// The crepe editor feature flags.\n/// Every feature is enabled by default.\n/// Every feature is a string literal type.\nexport enum CrepeFeature {\n /// Syntax highlighting and editing for code blocks with language support, theme customization, and preview capabilities.\n CodeMirror = 'code-mirror',\n\n /// Support for bullet lists, ordered lists, and todo lists with customizable icons and formatting.\n ListItem = 'list-item',\n\n /// Enhanced link editing and preview with customizable tooltips, edit/remove actions, and copy functionality.\n LinkTooltip = 'link-tooltip',\n\n /// Enhanced cursor experience with drop cursor and gap cursor for better content placement.\n Cursor = 'cursor',\n\n /// Image upload and management with resizing, captions, and support for both inline and block images.\n ImageBlock = 'image-block',\n\n /// Drag-and-drop block management and slash commands for quick content insertion and organization.\n BlockEdit = 'block-edit',\n\n /// Formatting toolbar for selected text with customizable icons and actions.\n Toolbar = 'toolbar',\n\n /// Document or block level placeholders to guide users when content is empty.\n Placeholder = 'placeholder',\n\n /// Full-featured table editing with row/column management, alignment options, and drag-and-drop functionality.\n Table = 'table',\n\n /// Mathematical formula support with both inline and block math rendering using KaTeX.\n Latex = 'latex',\n}\n\nexport interface CrepeFeatureConfig {\n [CrepeFeature.Cursor]?: CursorFeatureConfig\n [CrepeFeature.ListItem]?: ListItemFeatureConfig\n [CrepeFeature.LinkTooltip]?: LinkTooltipFeatureConfig\n [CrepeFeature.ImageBlock]?: ImageBlockFeatureConfig\n [CrepeFeature.BlockEdit]?: BlockEditFeatureConfig\n [CrepeFeature.Placeholder]?: PlaceholderFeatureConfig\n [CrepeFeature.Toolbar]?: ToolbarFeatureConfig\n [CrepeFeature.CodeMirror]?: CodeMirrorFeatureConfig\n [CrepeFeature.Table]?: TableFeatureConfig\n [CrepeFeature.Latex]?: LatexFeatureConfig\n}\n\nexport const defaultFeatures: Record<CrepeFeature, boolean> = {\n [CrepeFeature.Cursor]: true,\n [CrepeFeature.ListItem]: true,\n [CrepeFeature.LinkTooltip]: true,\n [CrepeFeature.ImageBlock]: true,\n [CrepeFeature.BlockEdit]: true,\n [CrepeFeature.Placeholder]: true,\n [CrepeFeature.Toolbar]: true,\n [CrepeFeature.CodeMirror]: true,\n [CrepeFeature.Table]: true,\n [CrepeFeature.Latex]: true,\n}\n","import {\n imageBlockComponent,\n imageBlockConfig,\n} from '@milkdown/kit/component/image-block'\nimport {\n imageInlineComponent,\n inlineImageConfig,\n} from '@milkdown/kit/component/image-inline'\n\nimport type { DefineFeature } from '../shared'\n\nimport { crepeFeatureConfig } from '../../core/slice'\nimport { captionIcon, imageIcon, confirmIcon } from '../../icons'\nimport { CrepeFeature } from '../index'\n\ninterface ImageBlockConfig {\n onUpload: (file: File) => Promise<string>\n proxyDomURL: (url: string) => Promise<string> | string\n\n inlineImageIcon: string\n inlineConfirmButton: string\n inlineUploadButton: string\n inlineUploadPlaceholderText: string\n inlineOnUpload: (file: File) => Promise<string>\n\n blockImageIcon: string\n blockConfirmButton: string\n blockCaptionIcon: string\n blockUploadButton: string\n blockCaptionPlaceholderText: string\n blockUploadPlaceholderText: string\n blockOnUpload: (file: File) => Promise<string>\n}\n\nexport type ImageBlockFeatureConfig = Partial<ImageBlockConfig>\n\nexport const imageBlock: DefineFeature<ImageBlockFeatureConfig> = (\n editor,\n config\n) => {\n editor\n .config(crepeFeatureConfig(CrepeFeature.ImageBlock))\n .config((ctx) => {\n ctx.update(inlineImageConfig.key, (value) => ({\n uploadButton: config?.inlineUploadButton ?? 'Upload',\n imageIcon: config?.inlineImageIcon ?? imageIcon,\n confirmButton: config?.inlineConfirmButton ?? confirmIcon,\n uploadPlaceholderText:\n config?.inlineUploadPlaceholderText ?? 'or paste link',\n onUpload: config?.inlineOnUpload ?? config?.onUpload ?? value.onUpload,\n proxyDomURL: config?.proxyDomURL,\n }))\n ctx.update(imageBlockConfig.key, (value) => ({\n uploadButton: config?.blockUploadButton ?? 'Upload file',\n imageIcon: config?.blockImageIcon ?? imageIcon,\n captionIcon: config?.blockCaptionIcon ?? captionIcon,\n confirmButton: config?.blockConfirmButton ?? 'Confirm',\n captionPlaceholderText:\n config?.blockCaptionPlaceholderText ?? 'Write Image Caption',\n uploadPlaceholderText:\n config?.blockUploadPlaceholderText ?? 'or paste link',\n onUpload: config?.blockOnUpload ?? config?.onUpload ?? value.onUpload,\n proxyDomURL: config?.proxyDomURL,\n }))\n })\n .use(imageBlockComponent)\n .use(imageInlineComponent)\n}\n"],"names":["CrepeFeature"],"mappings":"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"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { codeBlockConfig } from '@milkdown/kit/component/code-block';
|
|
2
2
|
import katex from 'katex';
|
|
3
|
-
import {
|
|
4
|
-
import { c as confirmIcon } from './confirm-DtE-HkVd.js';
|
|
3
|
+
import { createSlice } from '@milkdown/kit/ctx';
|
|
5
4
|
import { codeBlockSchema } from '@milkdown/kit/preset/commonmark';
|
|
6
|
-
import {
|
|
5
|
+
import { $nodeSchema, $inputRule, $remark } from '@milkdown/kit/utils';
|
|
7
6
|
import { tooltipFactory, TooltipProvider } from '@milkdown/kit/plugin/tooltip';
|
|
8
7
|
import { redo, undo } from '@milkdown/kit/prose/history';
|
|
9
8
|
import { keymap } from '@milkdown/kit/prose/keymap';
|
|
@@ -14,17 +13,60 @@ import { defineComponent, h, shallowRef, createApp } from 'vue';
|
|
|
14
13
|
import { Icon } from '@milkdown/kit/component';
|
|
15
14
|
import { nodeRule } from '@milkdown/kit/prose';
|
|
16
15
|
import { textblockTypeInputRule } from '@milkdown/kit/prose/inputrules';
|
|
17
|
-
import { $inputRule, $remark } from '@milkdown/kit/utils';
|
|
18
16
|
import remarkMath from 'remark-math';
|
|
19
17
|
import { visit } from 'unist-util-visit';
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
18
|
+
|
|
19
|
+
createSlice([], "FeaturesCtx");
|
|
20
|
+
createSlice({}, "CrepeCtx");
|
|
21
|
+
function useCrepeFeatures(ctx) {
|
|
22
|
+
return ctx.use("FeaturesCtx");
|
|
23
|
+
}
|
|
24
|
+
function crepeFeatureConfig(feature) {
|
|
25
|
+
return (ctx) => {
|
|
26
|
+
useCrepeFeatures(ctx).update((features) => {
|
|
27
|
+
if (features.includes(feature)) {
|
|
28
|
+
return features;
|
|
29
|
+
}
|
|
30
|
+
return [...features, feature];
|
|
31
|
+
});
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
var CrepeFeature = /* @__PURE__ */ ((CrepeFeature2) => {
|
|
36
|
+
CrepeFeature2["CodeMirror"] = "code-mirror";
|
|
37
|
+
CrepeFeature2["ListItem"] = "list-item";
|
|
38
|
+
CrepeFeature2["LinkTooltip"] = "link-tooltip";
|
|
39
|
+
CrepeFeature2["Cursor"] = "cursor";
|
|
40
|
+
CrepeFeature2["ImageBlock"] = "image-block";
|
|
41
|
+
CrepeFeature2["BlockEdit"] = "block-edit";
|
|
42
|
+
CrepeFeature2["Toolbar"] = "toolbar";
|
|
43
|
+
CrepeFeature2["Placeholder"] = "placeholder";
|
|
44
|
+
CrepeFeature2["Table"] = "table";
|
|
45
|
+
CrepeFeature2["Latex"] = "latex";
|
|
46
|
+
return CrepeFeature2;
|
|
47
|
+
})(CrepeFeature || {});
|
|
48
|
+
|
|
49
|
+
const confirmIcon = `
|
|
50
|
+
<svg
|
|
51
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
52
|
+
width="24"
|
|
53
|
+
height="24"
|
|
54
|
+
viewBox="0 0 24 24"
|
|
55
|
+
fill="none"
|
|
56
|
+
>
|
|
57
|
+
<g clip-path="url(#clip0_1013_1606)">
|
|
58
|
+
<path
|
|
59
|
+
d="M9.00012 16.1998L5.50012 12.6998C5.11012 12.3098 4.49012 12.3098 4.10012 12.6998C3.71012 13.0898 3.71012 13.7098 4.10012 14.0998L8.29012 18.2898C8.68012 18.6798 9.31012 18.6798 9.70012 18.2898L20.3001 7.69982C20.6901 7.30982 20.6901 6.68982 20.3001 6.29982C19.9101 5.90982 19.2901 5.90982 18.9001 6.29982L9.00012 16.1998Z"
|
|
60
|
+
fill="#817567"
|
|
61
|
+
/>
|
|
62
|
+
</g>
|
|
63
|
+
<defs>
|
|
64
|
+
<clipPath id="clip0_1013_1606">
|
|
65
|
+
<rect width="24" height="24" />
|
|
66
|
+
</clipPath>
|
|
67
|
+
</defs>
|
|
68
|
+
</svg>
|
|
69
|
+
`;
|
|
28
70
|
|
|
29
71
|
const blockLatexSchema = codeBlockSchema.extendSchema((prev) => {
|
|
30
72
|
return (ctx) => {
|
|
@@ -51,6 +93,52 @@ const blockLatexSchema = codeBlockSchema.extendSchema((prev) => {
|
|
|
51
93
|
};
|
|
52
94
|
});
|
|
53
95
|
|
|
96
|
+
const mathInlineId = "math_inline";
|
|
97
|
+
const mathInlineSchema = $nodeSchema(mathInlineId, () => ({
|
|
98
|
+
group: "inline",
|
|
99
|
+
inline: true,
|
|
100
|
+
draggable: true,
|
|
101
|
+
atom: true,
|
|
102
|
+
attrs: {
|
|
103
|
+
value: {
|
|
104
|
+
default: ""
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
parseDOM: [
|
|
108
|
+
{
|
|
109
|
+
tag: `span[data-type="${mathInlineId}"]`,
|
|
110
|
+
getAttrs: (dom) => {
|
|
111
|
+
var _a;
|
|
112
|
+
return {
|
|
113
|
+
value: (_a = dom.dataset.value) != null ? _a : ""
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
],
|
|
118
|
+
toDOM: (node) => {
|
|
119
|
+
const code = node.attrs.value;
|
|
120
|
+
const dom = document.createElement("span");
|
|
121
|
+
dom.dataset.type = mathInlineId;
|
|
122
|
+
dom.dataset.value = code;
|
|
123
|
+
katex.render(code, dom, {
|
|
124
|
+
throwOnError: false
|
|
125
|
+
});
|
|
126
|
+
return dom;
|
|
127
|
+
},
|
|
128
|
+
parseMarkdown: {
|
|
129
|
+
match: (node) => node.type === "inlineMath",
|
|
130
|
+
runner: (state, node, type) => {
|
|
131
|
+
state.addNode(type, { value: node.value });
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
toMarkdown: {
|
|
135
|
+
match: (node) => node.type.name === mathInlineId,
|
|
136
|
+
runner: (state, node) => {
|
|
137
|
+
state.addNode("inlineMath", void 0, node.attrs.value);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}));
|
|
141
|
+
|
|
54
142
|
const inlineLatexTooltip = tooltipFactory("INLINE_LATEX");
|
|
55
143
|
|
|
56
144
|
const LatexTooltip = defineComponent({
|
|
@@ -83,8 +171,7 @@ const LatexTooltip = defineComponent({
|
|
|
83
171
|
props.updateValue.value();
|
|
84
172
|
};
|
|
85
173
|
return () => {
|
|
86
|
-
|
|
87
|
-
return /* @__PURE__ */ h("div", { class: "container" }, props.innerView && /* @__PURE__ */ h("div", { ref: innerViewRef }), /* @__PURE__ */ h("button", { onPointerdown: onUpdate }, /* @__PURE__ */ h(Icon, { icon: (_b = (_a = props.config).inlineEditConfirm) == null ? void 0 : _b.call(_a) })));
|
|
174
|
+
return /* @__PURE__ */ h("div", { class: "container" }, props.innerView && /* @__PURE__ */ h("div", { ref: innerViewRef }), /* @__PURE__ */ h("button", { onPointerdown: onUpdate }, /* @__PURE__ */ h(Icon, { icon: props.config.inlineEditConfirm })));
|
|
88
175
|
};
|
|
89
176
|
}
|
|
90
177
|
});
|
|
@@ -253,9 +340,9 @@ const remarkMathBlockPlugin = $remark(
|
|
|
253
340
|
() => () => visitMathBlock
|
|
254
341
|
);
|
|
255
342
|
|
|
256
|
-
const
|
|
257
|
-
editor.config((ctx) => {
|
|
258
|
-
const flags = ctx.get(
|
|
343
|
+
const latex = (editor, config) => {
|
|
344
|
+
editor.config(crepeFeatureConfig(CrepeFeature.Latex)).config((ctx) => {
|
|
345
|
+
const flags = useCrepeFeatures(ctx).get();
|
|
259
346
|
const isCodeMirrorEnabled = flags.includes(CrepeFeature.CodeMirror);
|
|
260
347
|
if (!isCodeMirrorEnabled) {
|
|
261
348
|
throw new Error("You need to enable CodeMirror to use LaTeX feature");
|
|
@@ -274,7 +361,7 @@ const defineFeature = (editor, config) => {
|
|
|
274
361
|
view: (view) => {
|
|
275
362
|
var _a;
|
|
276
363
|
return new LatexInlineTooltip(ctx, view, {
|
|
277
|
-
inlineEditConfirm: (_a = config == null ? void 0 : config.inlineEditConfirm) != null ? _a :
|
|
364
|
+
inlineEditConfirm: (_a = config == null ? void 0 : config.inlineEditConfirm) != null ? _a : confirmIcon,
|
|
278
365
|
...config
|
|
279
366
|
});
|
|
280
367
|
}
|
|
@@ -290,5 +377,5 @@ function renderLatex(content, options) {
|
|
|
290
377
|
return html;
|
|
291
378
|
}
|
|
292
379
|
|
|
293
|
-
export {
|
|
294
|
-
//# sourceMappingURL=index
|
|
380
|
+
export { latex };
|
|
381
|
+
//# sourceMappingURL=index.js.map
|