@jvs-milkdown/crepe 1.2.29 → 1.2.31
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 +204 -111
- package/src/feature/fixed-toolbar/index.ts +31 -9
- 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;AAGhE,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,GAAG,EAMT,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.31",
|
|
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.31",
|
|
111
|
+
"@jvs-milkdown/prose": "^1.2.31",
|
|
112
|
+
"@jvs-milkdown/utils": "^1.2.31",
|
|
113
113
|
"@types/lodash-es": "^4.17.12",
|
|
114
114
|
"clsx": "^2.0.0",
|
|
115
115
|
"codemirror": "^6.0.1",
|
|
@@ -1,13 +1,13 @@
|
|
|
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
|
-
// @ts-ignore
|
|
6
5
|
import {
|
|
7
6
|
defineComponent,
|
|
8
7
|
type ShallowRef,
|
|
9
8
|
type Ref,
|
|
10
9
|
ref,
|
|
10
|
+
computed,
|
|
11
11
|
onMounted,
|
|
12
12
|
onUnmounted,
|
|
13
13
|
h,
|
|
@@ -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 = computed(() => editorWidthMap[viewState.editorWidth as EditorWidth])
|
|
82
|
+
const isFull = computed(() => maxWidth.value === '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.value ? '100%' : maxWidth.value,
|
|
142
|
+
margin: isFull.value ? '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
|
-
hide: () => {}, // No-op for fixed toolbar
|
|
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' : '0px'
|
|
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',
|