@jvs-milkdown/crepe 1.2.29 → 1.2.30
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.js +2 -1
- package/lib/cjs/builder.js.map +1 -1
- package/lib/cjs/feature/toolbar/index.js +84 -62
- package/lib/cjs/feature/toolbar/index.js.map +1 -1
- package/lib/cjs/index.js +1121 -988
- package/lib/cjs/index.js.map +1 -1
- package/lib/esm/builder.js +2 -1
- package/lib/esm/builder.js.map +1 -1
- package/lib/esm/feature/toolbar/index.js +84 -62
- package/lib/esm/feature/toolbar/index.js.map +1 -1
- package/lib/esm/index.js +1143 -1010
- package/lib/esm/index.js.map +1 -1
- package/lib/theme/common/image-block.css +5 -1
- package/lib/theme/common/reset.css +1 -1
- package/lib/theme/common/table.css +5 -0
- package/lib/theme/common/toolbar.css +23 -0
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/types/feature/fixed-toolbar/component.d.ts +2 -2
- package/lib/types/feature/fixed-toolbar/component.d.ts.map +1 -1
- package/lib/types/feature/fixed-toolbar/index.d.ts +2 -0
- package/lib/types/feature/fixed-toolbar/index.d.ts.map +1 -1
- package/lib/types/feature/fixed-toolbar/outline-panel.d.ts.map +1 -1
- package/lib/types/feature/fixed-toolbar/view-menu-state.d.ts +3 -0
- package/lib/types/feature/fixed-toolbar/view-menu-state.d.ts.map +1 -1
- package/lib/types/feature/toolbar/component.d.ts +2 -2
- package/lib/types/feature/toolbar/component.d.ts.map +1 -1
- package/lib/types/feature/toolbar/index.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/feature/fixed-toolbar/component.tsx +203 -110
- package/src/feature/fixed-toolbar/index.ts +30 -8
- package/src/feature/fixed-toolbar/outline-panel.tsx +1 -2
- package/src/feature/fixed-toolbar/view-menu-state.ts +2 -0
- package/src/feature/toolbar/component.tsx +57 -44
- package/src/feature/toolbar/index.ts +9 -13
- package/src/theme/common/image-block.css +6 -1
- package/src/theme/common/reset.css +1 -1
- package/src/theme/common/table.css +5 -0
- package/src/theme/common/toolbar.css +30 -0
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import type { Ctx } from '@jvs-milkdown/kit/ctx';
|
|
2
|
-
import type {
|
|
2
|
+
import type { EditorState } from '@jvs-milkdown/kit/prose/state';
|
|
3
3
|
import { type ShallowRef, type Ref } from 'vue';
|
|
4
4
|
import type { FixedToolbarFeatureConfig } from '.';
|
|
5
5
|
type FixedToolbarProps = {
|
|
6
6
|
ctx: Ctx;
|
|
7
7
|
hide: () => void;
|
|
8
8
|
show: Ref<boolean>;
|
|
9
|
-
|
|
9
|
+
state: ShallowRef<EditorState>;
|
|
10
10
|
config?: FixedToolbarFeatureConfig;
|
|
11
11
|
canUndo: Ref<boolean>;
|
|
12
12
|
canRedo: Ref<boolean>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../src/feature/fixed-toolbar/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../src/feature/fixed-toolbar/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAIhE,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,GAAG,EAKT,MAAM,KAAK,CAAA;AAEZ,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,GAAG,CAAA;AAalD,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAClB,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAA;IAC9B,MAAM,CAAC,EAAE,yBAAyB,CAAA;IAClC,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACrB,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,qBAAqB,oXAuPhC,CAAA"}
|
|
@@ -42,6 +42,8 @@ export interface FixedToolbarConfig {
|
|
|
42
42
|
showCover?: boolean;
|
|
43
43
|
coverUrl?: string;
|
|
44
44
|
editorWidth?: EditorWidth;
|
|
45
|
+
showFloatingToolbar?: boolean;
|
|
46
|
+
fixedToolbarVisible?: boolean;
|
|
45
47
|
}
|
|
46
48
|
export type FixedToolbarFeatureConfig = Partial<FixedToolbarConfig>;
|
|
47
49
|
export declare const fixedToolbarConfig: import("@jvs-milkdown/utils").$Ctx<Partial<FixedToolbarConfig>, "fixedToolbarConfigCtx">;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/feature/fixed-toolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAIhD,OAAO,EAAU,SAAS,EAAiB,MAAM,+BAA+B,CAAA;AAehF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/feature/fixed-toolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAIhD,OAAO,EAAU,SAAS,EAAiB,MAAM,+BAA+B,CAAA;AAehF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAYpD,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,mBAAmB,CAAA;AAE1B,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAC3D,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAClC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;IAC/C,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE;QACb,IAAI,CAAC,EAAE,OAAO,CAAA;QACd,IAAI,CAAC,EAAE,OAAO,CAAA;QACd,IAAI,CAAC,EAAE,OAAO,CAAA;QACd,MAAM,CAAC,EAAE,OAAO,CAAA;QAChB,MAAM,CAAC,EAAE,OAAO,CAAA;KACjB,CAAA;IACD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/C,WAAW,CAAC,EAAE,CAAC,UAAU,GAAG,MAAM,GAAG,KAAK,CAAC,EAAE,CAAA;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IACzE,WAAW,CAAC,EAAE,CAAC,UAAU,GAAG,MAAM,GAAG,KAAK,CAAC,EAAE,CAAA;IAC7C,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAClC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AAED,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAAA;AAEnE,eAAO,MAAM,kBAAkB,0FAG9B,CAAA;AAED,eAAO,MAAM,eAAe,gBAA0C,CAAA;AAoYtE,eAAO,MAAM,kBAAkB,sCAK7B,CAAA;AAEF,eAAO,MAAM,YAAY,EAAE,aAAa,CAAC,yBAAyB,CA+BjE,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"outline-panel.d.ts","sourceRoot":"","sources":["../../../../src/feature/fixed-toolbar/outline-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAmBhD,eAAO,MAAM,YAAY;;cAEE,MAAM,GAAG;;;;;cAAT,MAAM,GAAG;;;+
|
|
1
|
+
{"version":3,"file":"outline-panel.d.ts","sourceRoot":"","sources":["../../../../src/feature/fixed-toolbar/outline-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAmBhD,eAAO,MAAM,YAAY;;cAEE,MAAM,GAAG;;;;;cAAT,MAAM,GAAG;;;+GAyoBlC,CAAA"}
|
|
@@ -9,6 +9,7 @@ export interface ViewMenuState {
|
|
|
9
9
|
showCover: boolean;
|
|
10
10
|
coverUrl: string;
|
|
11
11
|
editorWidth: EditorWidth;
|
|
12
|
+
fixedToolbarVisible: boolean;
|
|
12
13
|
}
|
|
13
14
|
export declare const editorWidthMap: Record<EditorWidth, string>;
|
|
14
15
|
export declare const createViewMenuState: () => {
|
|
@@ -20,6 +21,7 @@ export declare const createViewMenuState: () => {
|
|
|
20
21
|
showCover: boolean;
|
|
21
22
|
coverUrl: string;
|
|
22
23
|
editorWidth: EditorWidth;
|
|
24
|
+
fixedToolbarVisible: boolean;
|
|
23
25
|
};
|
|
24
26
|
export declare const viewMenuStateCtx: import("@jvs-milkdown/utils").$Ctx<{
|
|
25
27
|
outlineVisible: boolean;
|
|
@@ -30,5 +32,6 @@ export declare const viewMenuStateCtx: import("@jvs-milkdown/utils").$Ctx<{
|
|
|
30
32
|
showCover: boolean;
|
|
31
33
|
coverUrl: string;
|
|
32
34
|
editorWidth: EditorWidth;
|
|
35
|
+
fixedToolbarVisible: boolean;
|
|
33
36
|
}, "viewMenuStateCtx">;
|
|
34
37
|
//# sourceMappingURL=view-menu-state.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"view-menu-state.d.ts","sourceRoot":"","sources":["../../../../src/feature/fixed-toolbar/view-menu-state.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAA;AAC9C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAErD,MAAM,WAAW,aAAa;IAC5B,cAAc,EAAE,OAAO,CAAA;IACvB,eAAe,EAAE,eAAe,CAAA;IAChC,YAAY,EAAE,MAAM,CAAA;IACpB,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,WAAW,CAAA;
|
|
1
|
+
{"version":3,"file":"view-menu-state.d.ts","sourceRoot":"","sources":["../../../../src/feature/fixed-toolbar/view-menu-state.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAA;AAC9C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAErD,MAAM,WAAW,aAAa;IAC5B,cAAc,EAAE,OAAO,CAAA;IACvB,eAAe,EAAE,eAAe,CAAA;IAChC,YAAY,EAAE,MAAM,CAAA;IACpB,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,WAAW,CAAA;IACxB,mBAAmB,EAAE,OAAO,CAAA;CAC7B;AAED,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAItD,CAAA;AAED,eAAO,MAAM,mBAAmB;oBAjBd,OAAO;qBACN,eAAe;kBAClB,MAAM;wBACA,MAAM,GAAG,IAAI;eACtB,OAAO;eACP,OAAO;cACR,MAAM;iBACH,WAAW;yBACH,OAAO;CAoB1B,CAAA;AAIJ,eAAO,MAAM,gBAAgB;oBAhCX,OAAO;qBACN,eAAe;kBAClB,MAAM;wBACA,MAAM,GAAG,IAAI;eACtB,OAAO;eACP,OAAO;cACR,MAAM;iBACH,WAAW;yBACH,OAAO;sBAwBiD,CAAA"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import type { Ctx } from '@jvs-milkdown/kit/ctx';
|
|
2
|
-
import {
|
|
2
|
+
import type { EditorState } from '@jvs-milkdown/kit/prose/state';
|
|
3
3
|
import { type Ref, type ShallowRef } from 'vue';
|
|
4
4
|
import type { ToolbarFeatureConfig } from '.';
|
|
5
5
|
type ToolbarProps = {
|
|
6
6
|
ctx: Ctx;
|
|
7
7
|
hide: () => void;
|
|
8
8
|
show: Ref<boolean>;
|
|
9
|
-
|
|
9
|
+
state: ShallowRef<EditorState>;
|
|
10
10
|
config?: ToolbarFeatureConfig;
|
|
11
11
|
isFixed?: boolean;
|
|
12
12
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../src/feature/toolbar/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;
|
|
1
|
+
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../src/feature/toolbar/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAEhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAyBhE,OAAO,EAEL,KAAK,GAAG,EACR,KAAK,UAAU,EAQhB,MAAM,KAAK,CAAA;AAEZ,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,GAAG,CAAA;AAmG7C,KAAK,YAAY,GAAG;IAClB,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAClB,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAA;IAC9B,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAeD,eAAO,MAAM,OAAO,0WA+iFlB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/feature/toolbar/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/feature/toolbar/index.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAa3C,UAAU,aAAa;IACrB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,iBAAiB,EAAE,MAAM,CAAA;IACzB,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,YAAY,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;CAC3D;AAED,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,aAAa,CAAC,CAAA;AAqIzD,eAAO,MAAM,OAAO,EAAE,aAAa,CAAC,oBAAoB,CA+BvD,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jvs-milkdown/crepe",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.30",
|
|
4
4
|
"keywords": [
|
|
5
5
|
"crepe",
|
|
6
6
|
"editor",
|
|
@@ -107,9 +107,9 @@
|
|
|
107
107
|
"@codemirror/theme-one-dark": "^6.1.2",
|
|
108
108
|
"@codemirror/view": "^6.26.0",
|
|
109
109
|
"@floating-ui/dom": "^1.7.6",
|
|
110
|
-
"@jvs-milkdown/kit": "^1.2.
|
|
111
|
-
"@jvs-milkdown/prose": "^1.2.
|
|
112
|
-
"@jvs-milkdown/utils": "^1.2.
|
|
110
|
+
"@jvs-milkdown/kit": "^1.2.30",
|
|
111
|
+
"@jvs-milkdown/prose": "^1.2.30",
|
|
112
|
+
"@jvs-milkdown/utils": "^1.2.30",
|
|
113
113
|
"@types/lodash-es": "^4.17.12",
|
|
114
114
|
"clsx": "^2.0.0",
|
|
115
115
|
"codemirror": "^6.0.1",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Ctx } from '@jvs-milkdown/kit/ctx'
|
|
2
|
-
import type {
|
|
2
|
+
import type { EditorState } from '@jvs-milkdown/kit/prose/state'
|
|
3
3
|
|
|
4
4
|
import { commandsCtx } from '@jvs-milkdown/kit/core'
|
|
5
5
|
// @ts-ignore
|
|
@@ -15,17 +15,22 @@ import {
|
|
|
15
15
|
|
|
16
16
|
import type { FixedToolbarFeatureConfig } from '.'
|
|
17
17
|
|
|
18
|
-
import { undoIcon, redoIcon } from '../../icons'
|
|
18
|
+
import { undoIcon, redoIcon, chevronDownIcon } from '../../icons'
|
|
19
19
|
import { keepAlive } from '../../utils/keep-alive'
|
|
20
20
|
import { Toolbar } from '../toolbar/component'
|
|
21
21
|
import { MenuBar } from './menu-bar'
|
|
22
22
|
import { ShortcutHelpModal } from './shortcut-help-modal'
|
|
23
|
+
import {
|
|
24
|
+
viewMenuStateCtx,
|
|
25
|
+
editorWidthMap,
|
|
26
|
+
type EditorWidth,
|
|
27
|
+
} from './view-menu-state'
|
|
23
28
|
|
|
24
29
|
type FixedToolbarProps = {
|
|
25
30
|
ctx: Ctx
|
|
26
31
|
hide: () => void
|
|
27
32
|
show: Ref<boolean>
|
|
28
|
-
|
|
33
|
+
state: ShallowRef<EditorState>
|
|
29
34
|
config?: FixedToolbarFeatureConfig
|
|
30
35
|
canUndo: Ref<boolean>
|
|
31
36
|
canRedo: Ref<boolean>
|
|
@@ -36,7 +41,7 @@ export const FixedToolbarComponent = defineComponent<FixedToolbarProps>({
|
|
|
36
41
|
ctx: { type: Object, required: true },
|
|
37
42
|
hide: { type: Function, required: true },
|
|
38
43
|
show: { type: Object, required: true },
|
|
39
|
-
|
|
44
|
+
state: { type: Object, required: true },
|
|
40
45
|
config: { type: Object, required: false },
|
|
41
46
|
canUndo: { type: Object, required: true },
|
|
42
47
|
canRedo: { type: Object, required: true },
|
|
@@ -59,9 +64,9 @@ export const FixedToolbarComponent = defineComponent<FixedToolbarProps>({
|
|
|
59
64
|
})
|
|
60
65
|
|
|
61
66
|
return () => {
|
|
62
|
-
// Access
|
|
63
|
-
const
|
|
64
|
-
void
|
|
67
|
+
// Access state to register reactivity dependency for Vue on editor transactions
|
|
68
|
+
const _state = props.state?.value || props.state
|
|
69
|
+
void _state
|
|
65
70
|
|
|
66
71
|
const canUndo =
|
|
67
72
|
(typeof props.canUndo === 'boolean'
|
|
@@ -72,120 +77,208 @@ export const FixedToolbarComponent = defineComponent<FixedToolbarProps>({
|
|
|
72
77
|
? props.canRedo
|
|
73
78
|
: props.canRedo?.value) || false
|
|
74
79
|
|
|
80
|
+
const viewState = props.ctx.get(viewMenuStateCtx.key)
|
|
81
|
+
const maxWidth = editorWidthMap[viewState.editorWidth as EditorWidth]
|
|
82
|
+
const isFull = maxWidth === 'none'
|
|
83
|
+
|
|
84
|
+
if (!viewState.fixedToolbarVisible) {
|
|
85
|
+
return (
|
|
86
|
+
<button
|
|
87
|
+
type="button"
|
|
88
|
+
class="fixed-toolbar-expand-btn"
|
|
89
|
+
title="展开工具栏"
|
|
90
|
+
onClick={(e: MouseEvent) => {
|
|
91
|
+
e.preventDefault()
|
|
92
|
+
e.stopPropagation()
|
|
93
|
+
viewState.fixedToolbarVisible = true
|
|
94
|
+
}}
|
|
95
|
+
style={{
|
|
96
|
+
position: 'absolute',
|
|
97
|
+
top: '0',
|
|
98
|
+
right: '32px',
|
|
99
|
+
display: 'flex',
|
|
100
|
+
alignItems: 'center',
|
|
101
|
+
justifyContent: 'center',
|
|
102
|
+
width: '32px',
|
|
103
|
+
height: '24px',
|
|
104
|
+
border:
|
|
105
|
+
'1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 85%))',
|
|
106
|
+
borderTop: 'none',
|
|
107
|
+
background: 'var(--crepe-color-surface, #ffffff)',
|
|
108
|
+
cursor: 'pointer',
|
|
109
|
+
borderRadius: '0 0 6px 6px',
|
|
110
|
+
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.06)',
|
|
111
|
+
color: 'var(--crepe-color-on-surface, #363b4c)',
|
|
112
|
+
pointerEvents: 'auto',
|
|
113
|
+
zIndex: 200,
|
|
114
|
+
}}
|
|
115
|
+
>
|
|
116
|
+
<span
|
|
117
|
+
style={{ display: 'inline-flex', alignItems: 'center' }}
|
|
118
|
+
innerHTML={chevronDownIcon}
|
|
119
|
+
/>
|
|
120
|
+
</button>
|
|
121
|
+
)
|
|
122
|
+
}
|
|
123
|
+
|
|
75
124
|
return (
|
|
76
125
|
<div
|
|
77
126
|
style={{
|
|
127
|
+
position: 'relative',
|
|
128
|
+
width: '100%',
|
|
129
|
+
height: '100%',
|
|
78
130
|
display: 'flex',
|
|
79
131
|
alignItems: 'center',
|
|
80
132
|
justifyContent: 'center',
|
|
81
|
-
width: '100%',
|
|
82
|
-
gap: '0px',
|
|
83
|
-
minWidth: '0',
|
|
84
|
-
overflow: 'hidden',
|
|
85
133
|
}}
|
|
86
134
|
>
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
135
|
+
<div
|
|
136
|
+
style={{
|
|
137
|
+
display: 'flex',
|
|
138
|
+
alignItems: 'center',
|
|
139
|
+
justifyContent: 'center',
|
|
140
|
+
width: '100%',
|
|
141
|
+
maxWidth: isFull ? '100%' : maxWidth,
|
|
142
|
+
margin: isFull ? '0' : '0 auto',
|
|
143
|
+
gap: '0px',
|
|
144
|
+
minWidth: '0',
|
|
145
|
+
overflow: 'hidden',
|
|
146
|
+
}}
|
|
147
|
+
>
|
|
148
|
+
{props.config?.showMenuBar !== false && [
|
|
149
|
+
<MenuBar ctx={props.ctx} config={props.config} />,
|
|
150
|
+
<div
|
|
151
|
+
style={{
|
|
152
|
+
width: '1px',
|
|
153
|
+
minWidth: '1px',
|
|
154
|
+
height: '20px',
|
|
155
|
+
backgroundColor:
|
|
156
|
+
'var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))',
|
|
157
|
+
}}
|
|
158
|
+
/>,
|
|
159
|
+
]}
|
|
160
|
+
{props.config?.showHistory !== false && [
|
|
161
|
+
<button
|
|
162
|
+
type="button"
|
|
163
|
+
class={['toolbar-item', !canUndo && 'disabled']}
|
|
164
|
+
disabled={!canUndo}
|
|
165
|
+
title="撤销"
|
|
166
|
+
onPointerdown={(e: PointerEvent) => {
|
|
167
|
+
e.preventDefault()
|
|
168
|
+
e.stopPropagation()
|
|
169
|
+
}}
|
|
170
|
+
onClick={(e: MouseEvent) => {
|
|
171
|
+
e.preventDefault()
|
|
172
|
+
e.stopPropagation()
|
|
173
|
+
if (canUndo) {
|
|
174
|
+
props.ctx.get(commandsCtx).call('Undo')
|
|
175
|
+
}
|
|
176
|
+
}}
|
|
177
|
+
style={{
|
|
178
|
+
display: 'flex',
|
|
179
|
+
alignItems: 'center',
|
|
180
|
+
justifyContent: 'center',
|
|
181
|
+
border: 'none',
|
|
182
|
+
background: 'transparent',
|
|
183
|
+
cursor: canUndo ? 'pointer' : 'default',
|
|
184
|
+
padding: '6px',
|
|
185
|
+
borderRadius: '4px',
|
|
186
|
+
color: canUndo ? '#363b4c' : '#c0c4cc',
|
|
187
|
+
'--toolbar-icon-color': canUndo ? '#363b4c' : '#c0c4cc',
|
|
188
|
+
}}
|
|
189
|
+
>
|
|
190
|
+
<span
|
|
191
|
+
style={{ display: 'inline-flex', alignItems: 'center' }}
|
|
192
|
+
innerHTML={undoIcon}
|
|
193
|
+
/>
|
|
194
|
+
</button>,
|
|
195
|
+
<button
|
|
196
|
+
type="button"
|
|
197
|
+
class={['toolbar-item', !canRedo && 'disabled']}
|
|
198
|
+
disabled={!canRedo}
|
|
199
|
+
title="恢复"
|
|
200
|
+
onPointerdown={(e: PointerEvent) => {
|
|
201
|
+
e.preventDefault()
|
|
202
|
+
e.stopPropagation()
|
|
203
|
+
}}
|
|
204
|
+
onClick={(e: MouseEvent) => {
|
|
205
|
+
e.preventDefault()
|
|
206
|
+
e.stopPropagation()
|
|
207
|
+
if (canRedo) {
|
|
208
|
+
props.ctx.get(commandsCtx).call('Redo')
|
|
209
|
+
}
|
|
210
|
+
}}
|
|
211
|
+
style={{
|
|
212
|
+
display: 'flex',
|
|
213
|
+
alignItems: 'center',
|
|
214
|
+
justifyContent: 'center',
|
|
215
|
+
border: 'none',
|
|
216
|
+
background: 'transparent',
|
|
217
|
+
cursor: canRedo ? 'pointer' : 'default',
|
|
218
|
+
padding: '6px',
|
|
219
|
+
borderRadius: '4px',
|
|
220
|
+
color: canRedo ? '#363b4c' : '#c0c4cc',
|
|
221
|
+
'--toolbar-icon-color': canRedo ? '#363b4c' : '#c0c4cc',
|
|
222
|
+
}}
|
|
223
|
+
>
|
|
224
|
+
<span
|
|
225
|
+
style={{ display: 'inline-flex', alignItems: 'center' }}
|
|
226
|
+
innerHTML={redoIcon}
|
|
227
|
+
/>
|
|
228
|
+
</button>,
|
|
229
|
+
<div
|
|
230
|
+
style={{
|
|
231
|
+
width: '1px',
|
|
232
|
+
minWidth: '1px',
|
|
233
|
+
height: '20px',
|
|
234
|
+
backgroundColor:
|
|
235
|
+
'var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))',
|
|
236
|
+
}}
|
|
237
|
+
/>,
|
|
238
|
+
]}
|
|
239
|
+
<Toolbar
|
|
240
|
+
ctx={props.ctx}
|
|
241
|
+
hide={props.hide}
|
|
242
|
+
show={props.show}
|
|
243
|
+
state={props.state}
|
|
244
|
+
config={props.config as any}
|
|
245
|
+
isFixed={true}
|
|
246
|
+
/>
|
|
247
|
+
{showShortcuts.value && (
|
|
248
|
+
<ShortcutHelpModal ctx={props.ctx} visible={showShortcuts} />
|
|
249
|
+
)}
|
|
250
|
+
</div>
|
|
251
|
+
|
|
252
|
+
<button
|
|
253
|
+
type="button"
|
|
254
|
+
class="toolbar-item collapse-btn"
|
|
255
|
+
title="折叠工具栏"
|
|
256
|
+
onClick={(e: MouseEvent) => {
|
|
257
|
+
e.preventDefault()
|
|
258
|
+
e.stopPropagation()
|
|
259
|
+
viewState.fixedToolbarVisible = false
|
|
260
|
+
}}
|
|
261
|
+
style={{
|
|
262
|
+
position: 'absolute',
|
|
263
|
+
top: '6px',
|
|
264
|
+
right: '32px',
|
|
265
|
+
margin: '0',
|
|
266
|
+
display: 'flex',
|
|
267
|
+
alignItems: 'center',
|
|
268
|
+
justifyContent: 'center',
|
|
269
|
+
pointerEvents: 'auto',
|
|
270
|
+
zIndex: 200,
|
|
271
|
+
}}
|
|
272
|
+
>
|
|
273
|
+
<span
|
|
150
274
|
style={{
|
|
151
|
-
display: 'flex',
|
|
275
|
+
display: 'inline-flex',
|
|
152
276
|
alignItems: 'center',
|
|
153
|
-
|
|
154
|
-
border: 'none',
|
|
155
|
-
background: 'transparent',
|
|
156
|
-
cursor: canRedo ? 'pointer' : 'default',
|
|
157
|
-
padding: '6px',
|
|
158
|
-
borderRadius: '4px',
|
|
159
|
-
color: canRedo ? '#363b4c' : '#c0c4cc',
|
|
160
|
-
'--toolbar-icon-color': canRedo ? '#363b4c' : '#c0c4cc',
|
|
161
|
-
}}
|
|
162
|
-
>
|
|
163
|
-
<span
|
|
164
|
-
style={{ display: 'inline-flex', alignItems: 'center' }}
|
|
165
|
-
innerHTML={redoIcon}
|
|
166
|
-
/>
|
|
167
|
-
</button>,
|
|
168
|
-
<div
|
|
169
|
-
style={{
|
|
170
|
-
width: '1px',
|
|
171
|
-
minWidth: '1px',
|
|
172
|
-
height: '20px',
|
|
173
|
-
backgroundColor:
|
|
174
|
-
'var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))',
|
|
277
|
+
transform: 'rotate(180deg)',
|
|
175
278
|
}}
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
ctx={props.ctx}
|
|
180
|
-
hide={props.hide}
|
|
181
|
-
show={props.show}
|
|
182
|
-
selection={props.selection}
|
|
183
|
-
config={props.config as any}
|
|
184
|
-
isFixed={true}
|
|
185
|
-
/>
|
|
186
|
-
{showShortcuts.value && (
|
|
187
|
-
<ShortcutHelpModal ctx={props.ctx} visible={showShortcuts} />
|
|
188
|
-
)}
|
|
279
|
+
innerHTML={chevronDownIcon}
|
|
280
|
+
/>
|
|
281
|
+
</button>
|
|
189
282
|
</div>
|
|
190
283
|
)
|
|
191
284
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Ctx } from '@jvs-milkdown/kit/ctx'
|
|
2
|
-
import type {
|
|
2
|
+
import type { EditorState, PluginView } from '@jvs-milkdown/kit/prose/state'
|
|
3
3
|
import type { EditorView } from '@jvs-milkdown/kit/prose/view'
|
|
4
4
|
|
|
5
5
|
import { Plugin, PluginKey, TextSelection } from '@jvs-milkdown/kit/prose/state'
|
|
@@ -23,6 +23,8 @@ import type { ToolbarItem } from '../toolbar/config'
|
|
|
23
23
|
|
|
24
24
|
import { crepeFeatureConfig } from '../../core/slice'
|
|
25
25
|
import { CrepeFeature } from '../index'
|
|
26
|
+
import { colorPlugins } from '../toolbar/color'
|
|
27
|
+
import { fontPlugins } from '../toolbar/font'
|
|
26
28
|
import { highlightMark } from '../toolbar/highlight-mark'
|
|
27
29
|
import { underline } from '../toolbar/underline'
|
|
28
30
|
import { FixedToolbarComponent } from './component'
|
|
@@ -73,6 +75,8 @@ export interface FixedToolbarConfig {
|
|
|
73
75
|
showCover?: boolean
|
|
74
76
|
coverUrl?: string
|
|
75
77
|
editorWidth?: EditorWidth
|
|
78
|
+
showFloatingToolbar?: boolean // Keep old option deprecated just in case
|
|
79
|
+
fixedToolbarVisible?: boolean
|
|
76
80
|
}
|
|
77
81
|
|
|
78
82
|
export type FixedToolbarFeatureConfig = Partial<FixedToolbarConfig>
|
|
@@ -92,7 +96,7 @@ class FixedToolbarView implements PluginView {
|
|
|
92
96
|
#outlineContent?: HTMLElement
|
|
93
97
|
#outlineApp?: App
|
|
94
98
|
#watcher?: WatchStopHandle
|
|
95
|
-
#
|
|
99
|
+
#state: ShallowRef<EditorState>
|
|
96
100
|
#show = ref(true)
|
|
97
101
|
#canUndo = ref(false)
|
|
98
102
|
#canRedo = ref(false)
|
|
@@ -121,6 +125,10 @@ class FixedToolbarView implements PluginView {
|
|
|
121
125
|
if (config?.coverUrl !== undefined) viewState.coverUrl = config.coverUrl
|
|
122
126
|
if (config?.editorWidth !== undefined)
|
|
123
127
|
viewState.editorWidth = config.editorWidth
|
|
128
|
+
if (config?.showFloatingToolbar !== undefined)
|
|
129
|
+
viewState.fixedToolbarVisible = config.showFloatingToolbar
|
|
130
|
+
if (config?.fixedToolbarVisible !== undefined)
|
|
131
|
+
viewState.fixedToolbarVisible = config.fixedToolbarVisible
|
|
124
132
|
|
|
125
133
|
// Load initial view menu state from localStorage if useLocalStorage is enabled
|
|
126
134
|
if (config?.useLocalStorage) {
|
|
@@ -144,6 +152,10 @@ class FixedToolbarView implements PluginView {
|
|
|
144
152
|
viewState.coverUrl = parsed.coverUrl
|
|
145
153
|
if (parsed.editorWidth !== undefined)
|
|
146
154
|
viewState.editorWidth = parsed.editorWidth
|
|
155
|
+
if (parsed.showFloatingToolbar !== undefined)
|
|
156
|
+
viewState.fixedToolbarVisible = parsed.showFloatingToolbar
|
|
157
|
+
if (parsed.fixedToolbarVisible !== undefined)
|
|
158
|
+
viewState.fixedToolbarVisible = parsed.fixedToolbarVisible
|
|
147
159
|
}
|
|
148
160
|
} catch (e) {
|
|
149
161
|
console.error('Error loading view state from localStorage:', e)
|
|
@@ -169,6 +181,7 @@ class FixedToolbarView implements PluginView {
|
|
|
169
181
|
showCover: newState.showCover,
|
|
170
182
|
coverUrl: newState.coverUrl,
|
|
171
183
|
editorWidth: newState.editorWidth,
|
|
184
|
+
fixedToolbarVisible: newState.fixedToolbarVisible,
|
|
172
185
|
}
|
|
173
186
|
localStorage.setItem('jvs-milkdown-data', JSON.stringify(merged))
|
|
174
187
|
} catch (e) {
|
|
@@ -181,13 +194,13 @@ class FixedToolbarView implements PluginView {
|
|
|
181
194
|
|
|
182
195
|
const content = document.createElement('div')
|
|
183
196
|
content.className = 'milkdown-fixed-toolbar'
|
|
184
|
-
this.#
|
|
197
|
+
this.#state = shallowRef(view.state)
|
|
185
198
|
|
|
186
199
|
const app = createApp(FixedToolbarComponent, {
|
|
187
200
|
ctx,
|
|
188
201
|
hide: () => {}, // No-op for fixed toolbar
|
|
189
202
|
config,
|
|
190
|
-
|
|
203
|
+
state: this.#state,
|
|
191
204
|
show: this.#show,
|
|
192
205
|
canUndo: this.#canUndo,
|
|
193
206
|
canRedo: this.#canRedo,
|
|
@@ -363,12 +376,19 @@ class FixedToolbarView implements PluginView {
|
|
|
363
376
|
viewState.documentBackground,
|
|
364
377
|
viewState.showCover,
|
|
365
378
|
viewState.editorWidth,
|
|
379
|
+
viewState.fixedToolbarVisible,
|
|
366
380
|
],
|
|
367
381
|
() => {
|
|
382
|
+
if (viewState.fixedToolbarVisible === false) {
|
|
383
|
+
this.#content.classList.add('collapsed')
|
|
384
|
+
} else {
|
|
385
|
+
this.#content.classList.remove('collapsed')
|
|
386
|
+
}
|
|
387
|
+
root.style.backgroundColor = ''
|
|
368
388
|
if (viewState.documentBackground) {
|
|
369
|
-
|
|
389
|
+
this.#view.dom.style.backgroundColor = viewState.documentBackground
|
|
370
390
|
} else {
|
|
371
|
-
|
|
391
|
+
this.#view.dom.style.backgroundColor = ''
|
|
372
392
|
}
|
|
373
393
|
|
|
374
394
|
// Reset root and toolbar styles to default/full-width
|
|
@@ -395,7 +415,7 @@ class FixedToolbarView implements PluginView {
|
|
|
395
415
|
|
|
396
416
|
const maxWidth = (editorWidthMap as any)[viewState.editorWidth]
|
|
397
417
|
const isFull = maxWidth === 'none'
|
|
398
|
-
const px = isFull ? '80px' : '
|
|
418
|
+
const px = isFull ? '80px' : '10px'
|
|
399
419
|
this.#view.dom.style.maxWidth = maxWidth
|
|
400
420
|
this.#view.dom.style.width = isFull ? '100%' : maxWidth
|
|
401
421
|
this.#view.dom.style.margin = isFull ? '0' : '0 auto'
|
|
@@ -422,7 +442,7 @@ class FixedToolbarView implements PluginView {
|
|
|
422
442
|
}
|
|
423
443
|
|
|
424
444
|
update = (view: EditorView) => {
|
|
425
|
-
this.#
|
|
445
|
+
this.#state.value = view.state
|
|
426
446
|
try {
|
|
427
447
|
this.#canUndo.value = undo(view.state)
|
|
428
448
|
this.#canRedo.value = redo(view.state)
|
|
@@ -489,5 +509,7 @@ export const fixedToolbar: DefineFeature<FixedToolbarFeatureConfig> = (
|
|
|
489
509
|
.use(fixedToolbarConfig)
|
|
490
510
|
.use(underline as any)
|
|
491
511
|
.use(highlightMark as any)
|
|
512
|
+
.use(colorPlugins as any)
|
|
513
|
+
.use(fontPlugins as any)
|
|
492
514
|
.use(fixedToolbarPlugin)
|
|
493
515
|
}
|
|
@@ -452,8 +452,7 @@ export const OutlinePanel = defineComponent({
|
|
|
452
452
|
width: `${state.outlineWidth}px`,
|
|
453
453
|
minWidth: '200px',
|
|
454
454
|
maxWidth: '400px',
|
|
455
|
-
backgroundColor:
|
|
456
|
-
state.documentBackground || 'var(--crepe-color-background)',
|
|
455
|
+
backgroundColor: 'transparent',
|
|
457
456
|
borderRight: isLeft
|
|
458
457
|
? '1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))'
|
|
459
458
|
: 'none',
|
|
@@ -13,6 +13,7 @@ export interface ViewMenuState {
|
|
|
13
13
|
showCover: boolean
|
|
14
14
|
coverUrl: string
|
|
15
15
|
editorWidth: EditorWidth
|
|
16
|
+
fixedToolbarVisible: boolean
|
|
16
17
|
}
|
|
17
18
|
|
|
18
19
|
export const editorWidthMap: Record<EditorWidth, string> = {
|
|
@@ -31,6 +32,7 @@ export const createViewMenuState = () =>
|
|
|
31
32
|
showCover: false,
|
|
32
33
|
coverUrl: '',
|
|
33
34
|
editorWidth: 'default',
|
|
35
|
+
fixedToolbarVisible: true,
|
|
34
36
|
})
|
|
35
37
|
|
|
36
38
|
import { $ctx } from '@jvs-milkdown/kit/utils'
|