@milkdown/plugin-slash 6.5.4 → 7.0.0-next.1
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/index.d.ts +2 -13
- package/lib/index.d.ts.map +1 -1
- package/lib/index.es.js +79 -382
- package/lib/index.es.js.map +1 -1
- package/lib/slash-plugin.d.ts +10 -0
- package/lib/slash-plugin.d.ts.map +1 -0
- package/lib/slash-provider.d.ts +21 -0
- package/lib/slash-provider.d.ts.map +1 -0
- package/package.json +12 -8
- package/src/index.ts +2 -34
- package/src/slash-plugin.ts +32 -0
- package/src/slash-provider.ts +138 -0
- package/lib/config.d.ts +0 -21
- package/lib/config.d.ts.map +0 -1
- package/lib/item.d.ts +0 -12
- package/lib/item.d.ts.map +0 -1
- package/lib/prose-plugin/dropdown.d.ts +0 -8
- package/lib/prose-plugin/dropdown.d.ts.map +0 -1
- package/lib/prose-plugin/index.d.ts +0 -7
- package/lib/prose-plugin/index.d.ts.map +0 -1
- package/lib/prose-plugin/input.d.ts +0 -14
- package/lib/prose-plugin/input.d.ts.map +0 -1
- package/lib/prose-plugin/props.d.ts +0 -11
- package/lib/prose-plugin/props.d.ts.map +0 -1
- package/lib/prose-plugin/status.d.ts +0 -14
- package/lib/prose-plugin/status.d.ts.map +0 -1
- package/lib/prose-plugin/view.d.ts +0 -13
- package/lib/prose-plugin/view.d.ts.map +0 -1
- package/lib/style.d.ts +0 -3
- package/lib/style.d.ts.map +0 -1
- package/lib/utility.d.ts +0 -14
- package/lib/utility.d.ts.map +0 -1
- package/src/config.ts +0 -142
- package/src/item.ts +0 -21
- package/src/prose-plugin/dropdown.ts +0 -50
- package/src/prose-plugin/index.ts +0 -26
- package/src/prose-plugin/input.ts +0 -142
- package/src/prose-plugin/props.ts +0 -104
- package/src/prose-plugin/status.ts +0 -37
- package/src/prose-plugin/view.ts +0 -112
- package/src/style.ts +0 -76
- package/src/utility.ts +0 -85
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { EditorState } from '@milkdown/prose/state';
|
|
2
|
+
import type { EditorView } from '@milkdown/prose/view';
|
|
3
|
+
import type { Instance, Props } from 'tippy.js';
|
|
4
|
+
export type SlashProviderOptions = {
|
|
5
|
+
content: HTMLElement;
|
|
6
|
+
tippyOptions?: Partial<Props>;
|
|
7
|
+
debounce?: number;
|
|
8
|
+
shouldShow?: (view: EditorView, prevState?: EditorState) => boolean;
|
|
9
|
+
};
|
|
10
|
+
export declare class SlashProvider {
|
|
11
|
+
#private;
|
|
12
|
+
element: HTMLElement;
|
|
13
|
+
constructor(options: SlashProviderOptions);
|
|
14
|
+
update: (view: EditorView, prevState?: EditorState) => void;
|
|
15
|
+
getContent: (view: EditorView) => string | undefined;
|
|
16
|
+
destroy: () => void;
|
|
17
|
+
show: () => void;
|
|
18
|
+
hide: () => void;
|
|
19
|
+
getInstance: () => Instance<Props> | undefined;
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=slash-provider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"slash-provider.d.ts","sourceRoot":"","sources":["../src/slash-provider.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEtD,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAI/C,MAAM,MAAM,oBAAoB,GAAG;IAEjC,OAAO,EAAE,WAAW,CAAA;IAEpB,YAAY,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IAE7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,CAAC,EAAE,WAAW,KAAK,OAAO,CAAA;CACpE,CAAA;AAGD,qBAAa,aAAa;;IAExB,OAAO,EAAE,WAAW,CAAA;gBAcR,OAAO,EAAE,oBAAoB;IAkDzC,MAAM,SAAU,UAAU,cAAc,WAAW,KAAG,IAAI,CAIzD;IAGD,UAAU,SAAU,UAAU,KAAG,MAAM,GAAG,SAAS,CAqBlD;IAGD,OAAO,aAEN;IAGD,IAAI,aAEH;IAGD,IAAI,aAEH;IAGD,WAAW,oCAEV;CACF"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@milkdown/plugin-slash",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "7.0.0-next.1",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -20,19 +20,23 @@
|
|
|
20
20
|
"src"
|
|
21
21
|
],
|
|
22
22
|
"peerDependencies": {
|
|
23
|
-
"@milkdown/core": "^
|
|
24
|
-
"@milkdown/
|
|
23
|
+
"@milkdown/core": "^7.0.0-next.0",
|
|
24
|
+
"@milkdown/ctx": "^7.0.0-next.0",
|
|
25
|
+
"@milkdown/prose": "^7.0.0-next.0"
|
|
25
26
|
},
|
|
26
27
|
"dependencies": {
|
|
28
|
+
"@types/lodash.debounce": "^4.0.7",
|
|
29
|
+
"lodash.debounce": "^4.0.8",
|
|
27
30
|
"smooth-scroll-into-view-if-needed": "^1.1.32",
|
|
31
|
+
"tippy.js": "^6.3.7",
|
|
28
32
|
"tslib": "^2.4.0",
|
|
29
|
-
"@milkdown/exception": "
|
|
30
|
-
"@milkdown/utils": "
|
|
33
|
+
"@milkdown/exception": "7.0.0-next.1",
|
|
34
|
+
"@milkdown/utils": "7.0.0-next.1"
|
|
31
35
|
},
|
|
32
36
|
"devDependencies": {
|
|
33
|
-
"@milkdown/core": "
|
|
34
|
-
"@milkdown/
|
|
35
|
-
"@milkdown/prose": "
|
|
37
|
+
"@milkdown/core": "7.0.0-next.1",
|
|
38
|
+
"@milkdown/ctx": "7.0.0-next.1",
|
|
39
|
+
"@milkdown/prose": "7.0.0-next.1"
|
|
36
40
|
},
|
|
37
41
|
"nx": {
|
|
38
42
|
"targets": {
|
package/src/index.ts
CHANGED
|
@@ -1,35 +1,3 @@
|
|
|
1
1
|
/* Copyright 2021, Milkdown by Mirone. */
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import type { Config } from './config'
|
|
5
|
-
import { defaultConfig } from './config'
|
|
6
|
-
import { createSlashPlugin } from './prose-plugin'
|
|
7
|
-
import type { CalcPosition } from './prose-plugin/view'
|
|
8
|
-
import { defaultCalcPosition } from './prose-plugin/view'
|
|
9
|
-
|
|
10
|
-
export type { Config, StatusConfig, StatusConfigBuilder, StatusConfigBuilderParams } from './config'
|
|
11
|
-
export { defaultActions, defaultConfig } from './config'
|
|
12
|
-
export type { Action, WrappedAction } from './item'
|
|
13
|
-
export { createDropdownItem } from './utility'
|
|
14
|
-
|
|
15
|
-
export interface Options {
|
|
16
|
-
config: Config
|
|
17
|
-
calcPosition: CalcPosition
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export const slashPlugin = createPlugin<string, Options>((utils, options) => {
|
|
21
|
-
const slashConfig = options?.config ?? defaultConfig
|
|
22
|
-
const calcPosition = options?.calcPosition ?? defaultCalcPosition
|
|
23
|
-
|
|
24
|
-
return {
|
|
25
|
-
prosePlugins: (_, ctx) => {
|
|
26
|
-
const config = slashConfig(ctx)
|
|
27
|
-
|
|
28
|
-
const plugin = createSlashPlugin(utils, config, 'slash-dropdown', calcPosition)
|
|
29
|
-
|
|
30
|
-
return [plugin]
|
|
31
|
-
},
|
|
32
|
-
}
|
|
33
|
-
})
|
|
34
|
-
|
|
35
|
-
export const slash = AtomList.create([slashPlugin()])
|
|
2
|
+
export * from './slash-plugin'
|
|
3
|
+
export * from './slash-provider'
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/* Copyright 2021, Milkdown by Mirone. */
|
|
2
|
+
import type { SliceType } from '@milkdown/ctx'
|
|
3
|
+
import type { PluginSpec } from '@milkdown/prose/state'
|
|
4
|
+
import { Plugin, PluginKey } from '@milkdown/prose/state'
|
|
5
|
+
import type { $Ctx, $Prose } from '@milkdown/utils'
|
|
6
|
+
import { $ctx, $prose } from '@milkdown/utils'
|
|
7
|
+
|
|
8
|
+
/// @internal
|
|
9
|
+
export type SlashPluginSpecId<Id extends string> = `${Id}_SLASH_SPEC`
|
|
10
|
+
|
|
11
|
+
/// @internal
|
|
12
|
+
export type SlashPlugin<Id extends string, State = any> = [$Ctx<PluginSpec<State>, SlashPluginSpecId<Id>>, $Prose] & {
|
|
13
|
+
key: SliceType<PluginSpec<State>, SlashPluginSpecId<Id>>
|
|
14
|
+
pluginKey: $Prose['key']
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/// Create a slash plugin with a unique id.
|
|
18
|
+
export const slashFactory = <Id extends string, State = any>(id: Id) => {
|
|
19
|
+
const slashSpec = $ctx<PluginSpec<State>, SlashPluginSpecId<Id>>({}, `${id}_SLASH_SPEC`)
|
|
20
|
+
const slashPlugin = $prose((ctx) => {
|
|
21
|
+
const spec = ctx.get(slashSpec.key)
|
|
22
|
+
return new Plugin({
|
|
23
|
+
key: new PluginKey(`${id}_SLASH`),
|
|
24
|
+
...spec,
|
|
25
|
+
})
|
|
26
|
+
})
|
|
27
|
+
const result = [slashSpec, slashPlugin] as SlashPlugin<Id>
|
|
28
|
+
result.key = slashSpec.key
|
|
29
|
+
result.pluginKey = slashPlugin.key
|
|
30
|
+
|
|
31
|
+
return result
|
|
32
|
+
}
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
/* Copyright 2021, Milkdown by Mirone. */
|
|
2
|
+
import { findParentNode, posToDOMRect } from '@milkdown/prose'
|
|
3
|
+
import type { EditorState } from '@milkdown/prose/state'
|
|
4
|
+
import { TextSelection } from '@milkdown/prose/state'
|
|
5
|
+
import type { EditorView } from '@milkdown/prose/view'
|
|
6
|
+
import debounce from 'lodash.debounce'
|
|
7
|
+
import type { Instance, Props } from 'tippy.js'
|
|
8
|
+
import tippy from 'tippy.js'
|
|
9
|
+
|
|
10
|
+
/// Options for slash provider.
|
|
11
|
+
export type SlashProviderOptions = {
|
|
12
|
+
/// The slash content.
|
|
13
|
+
content: HTMLElement
|
|
14
|
+
/// The options for creating [tippy.js](https://atomiks.github.io/tippyjs/) instance.
|
|
15
|
+
tippyOptions?: Partial<Props>
|
|
16
|
+
/// The debounce time for updating slash, 200ms by default.
|
|
17
|
+
debounce?: number
|
|
18
|
+
/// The function to determine whether the tooltip should be shown.
|
|
19
|
+
shouldShow?: (view: EditorView, prevState?: EditorState) => boolean
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/// A provider for creating slash.
|
|
23
|
+
export class SlashProvider {
|
|
24
|
+
/// The root element of the slash.
|
|
25
|
+
element: HTMLElement
|
|
26
|
+
|
|
27
|
+
/// @internal
|
|
28
|
+
#tippy: Instance | undefined
|
|
29
|
+
|
|
30
|
+
/// @internal
|
|
31
|
+
#tippyOptions: Partial<Props>
|
|
32
|
+
|
|
33
|
+
/// @internal
|
|
34
|
+
#debounce: number
|
|
35
|
+
|
|
36
|
+
/// @internal
|
|
37
|
+
#shouldShow: (view: EditorView, prevState?: EditorState) => boolean
|
|
38
|
+
|
|
39
|
+
constructor(options: SlashProviderOptions) {
|
|
40
|
+
this.element = options.content
|
|
41
|
+
this.#tippyOptions = options.tippyOptions ?? {}
|
|
42
|
+
this.#debounce = options.debounce ?? 200
|
|
43
|
+
this.#shouldShow = options.shouldShow ?? this.#_shouldShow
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/// @internal
|
|
47
|
+
#onUpdate = (view: EditorView, prevState?: EditorState): void => {
|
|
48
|
+
const { state, composing } = view
|
|
49
|
+
const { selection, doc } = state
|
|
50
|
+
const { ranges } = selection
|
|
51
|
+
const from = Math.min(...ranges.map(range => range.$from.pos))
|
|
52
|
+
const to = Math.max(...ranges.map(range => range.$to.pos))
|
|
53
|
+
const isSame = prevState && prevState.doc.eq(doc) && prevState.selection.eq(selection)
|
|
54
|
+
|
|
55
|
+
this.#tippy ??= tippy(view.dom, {
|
|
56
|
+
trigger: 'manual',
|
|
57
|
+
placement: 'bottom-start',
|
|
58
|
+
interactive: true,
|
|
59
|
+
...this.#tippyOptions,
|
|
60
|
+
content: this.element,
|
|
61
|
+
})
|
|
62
|
+
|
|
63
|
+
if (composing || isSame)
|
|
64
|
+
return
|
|
65
|
+
|
|
66
|
+
if (!this.#shouldShow(view, prevState)) {
|
|
67
|
+
this.hide()
|
|
68
|
+
return
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
this.#tippy.setProps({
|
|
72
|
+
getReferenceClientRect: () => posToDOMRect(view, from, to),
|
|
73
|
+
})
|
|
74
|
+
|
|
75
|
+
this.show()
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/// @internal
|
|
79
|
+
#_shouldShow(view: EditorView): boolean {
|
|
80
|
+
const currentTextBlockContent = this.getContent(view)
|
|
81
|
+
|
|
82
|
+
if (!currentTextBlockContent)
|
|
83
|
+
return false
|
|
84
|
+
|
|
85
|
+
return currentTextBlockContent.at(-1) === '/'
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/// Update provider state by editor view.
|
|
89
|
+
update = (view: EditorView, prevState?: EditorState): void => {
|
|
90
|
+
const updater = debounce(this.#onUpdate, this.#debounce)
|
|
91
|
+
|
|
92
|
+
updater(view, prevState)
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/// Get the content of the current text block.
|
|
96
|
+
getContent = (view: EditorView): string | undefined => {
|
|
97
|
+
const { selection } = view.state
|
|
98
|
+
const { empty } = selection
|
|
99
|
+
const isTextBlock = view.state.selection instanceof TextSelection
|
|
100
|
+
|
|
101
|
+
const isSlashChildren = this.element.contains(document.activeElement)
|
|
102
|
+
|
|
103
|
+
const notHasFocus = !view.hasFocus() && !isSlashChildren
|
|
104
|
+
|
|
105
|
+
const isReadonly = !view.editable
|
|
106
|
+
|
|
107
|
+
const paragraph = findParentNode(({ type }) => type.name === 'paragraph')(view.state.selection)
|
|
108
|
+
|
|
109
|
+
const isNotInParagraph = !paragraph
|
|
110
|
+
|
|
111
|
+
if (notHasFocus || isReadonly || !empty || !isTextBlock || isNotInParagraph)
|
|
112
|
+
return
|
|
113
|
+
|
|
114
|
+
const currentTextBlockContent = paragraph.node.textContent
|
|
115
|
+
|
|
116
|
+
return currentTextBlockContent
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/// Destroy the slash.
|
|
120
|
+
destroy = () => {
|
|
121
|
+
this.#tippy?.destroy()
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/// Show the slash.
|
|
125
|
+
show = () => {
|
|
126
|
+
this.#tippy?.show()
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/// Hide the slash.
|
|
130
|
+
hide = () => {
|
|
131
|
+
this.#tippy?.hide()
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
/// Get the [tippy.js](https://atomiks.github.io/tippyjs/) instance.
|
|
135
|
+
getInstance = () => {
|
|
136
|
+
return this.#tippy
|
|
137
|
+
}
|
|
138
|
+
}
|
package/lib/config.d.ts
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import type { Ctx } from '@milkdown/core';
|
|
2
|
-
import type { Node } from '@milkdown/prose/model';
|
|
3
|
-
import type { EditorState } from '@milkdown/prose/state';
|
|
4
|
-
import type { WrappedAction } from './item';
|
|
5
|
-
type Nullable<T> = T | null | undefined;
|
|
6
|
-
export interface StatusConfig {
|
|
7
|
-
placeholder?: Nullable<string>;
|
|
8
|
-
actions?: Nullable<WrappedAction[]>;
|
|
9
|
-
}
|
|
10
|
-
export interface StatusConfigBuilderParams {
|
|
11
|
-
content: string;
|
|
12
|
-
isTopLevel: boolean;
|
|
13
|
-
parentNode: Node;
|
|
14
|
-
state: EditorState;
|
|
15
|
-
}
|
|
16
|
-
export type StatusConfigBuilder = (params: StatusConfigBuilderParams) => Nullable<StatusConfig>;
|
|
17
|
-
export type Config = (ctx: Ctx) => StatusConfigBuilder;
|
|
18
|
-
export declare const defaultActions: (ctx: Ctx, input?: string) => WrappedAction[];
|
|
19
|
-
export declare const defaultConfig: Config;
|
|
20
|
-
export {};
|
|
21
|
-
//# sourceMappingURL=config.d.ts.map
|
package/lib/config.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAA;AAEzC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AACjD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAA;AAG3C,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS,CAAA;AAEvC,MAAM,WAAW,YAAY;IAC3B,WAAW,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CAAC,EAAE,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAA;CACpC;AAED,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,IAAI,CAAA;IAChB,KAAK,EAAE,WAAW,CAAA;CACnB;AAED,MAAM,MAAM,mBAAmB,GAAG,CAAC,MAAM,EAAE,yBAAyB,KAAK,QAAQ,CAAC,YAAY,CAAC,CAAA;AAE/F,MAAM,MAAM,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,KAAK,mBAAmB,CAAA;AAEtD,eAAO,MAAM,cAAc,QAAS,GAAG,qBAAgB,aAAa,EAuFnE,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,MAyB3B,CAAA"}
|
package/lib/item.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import type { Command } from '@milkdown/prose/state';
|
|
2
|
-
export interface Action {
|
|
3
|
-
id: string;
|
|
4
|
-
$: HTMLElement;
|
|
5
|
-
command: Command;
|
|
6
|
-
}
|
|
7
|
-
export type WrappedAction = Pick<Action, 'id'> & {
|
|
8
|
-
command: () => void;
|
|
9
|
-
dom: HTMLElement;
|
|
10
|
-
};
|
|
11
|
-
export declare const transformAction: (action: WrappedAction) => Action;
|
|
12
|
-
//# sourceMappingURL=item.d.ts.map
|
package/lib/item.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../src/item.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAIpD,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,CAAC,EAAE,WAAW,CAAA;IACd,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,GAAG,EAAE,WAAW,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,eAAe,WAAY,aAAa,KAAG,MAItD,CAAA"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { Status } from './status';
|
|
2
|
-
interface Listeners {
|
|
3
|
-
mouseEnter: EventListener;
|
|
4
|
-
mouseLeave: EventListener;
|
|
5
|
-
}
|
|
6
|
-
export declare const renderDropdown: (status: Status, dropdownElement: HTMLElement, listeners: Listeners) => boolean;
|
|
7
|
-
export {};
|
|
8
|
-
//# sourceMappingURL=dropdown.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/prose-plugin/dropdown.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEtC,UAAU,SAAS;IACjB,UAAU,EAAE,aAAa,CAAA;IACzB,UAAU,EAAE,aAAa,CAAA;CAC1B;AAED,eAAO,MAAM,cAAc,WAAY,MAAM,mBAAmB,WAAW,aAAa,SAAS,KAAG,OAuCnG,CAAA"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { Plugin } from '@milkdown/prose/state';
|
|
2
|
-
import type { ThemeUtils } from '@milkdown/utils';
|
|
3
|
-
import type { StatusConfigBuilder } from '..';
|
|
4
|
-
import type { CalcPosition } from './view';
|
|
5
|
-
export declare const key = "MILKDOWN_SLASH";
|
|
6
|
-
export declare const createSlashPlugin: (utils: ThemeUtils, builder: StatusConfigBuilder, className: string, calcPosition: CalcPosition) => Plugin<any>;
|
|
7
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/prose-plugin/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAa,MAAM,uBAAuB,CAAA;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,IAAI,CAAA;AAG7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAA;AAG1C,eAAO,MAAM,GAAG,mBAAmB,CAAA;AAEnC,eAAO,MAAM,iBAAiB,UACrB,UAAU,WACR,mBAAmB,aACjB,MAAM,gBACH,YAAY,gBAS3B,CAAA"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { EditorView } from '@milkdown/prose/view';
|
|
2
|
-
import type { Status } from './status';
|
|
3
|
-
export declare const createMouseManager: () => {
|
|
4
|
-
isLock: () => boolean;
|
|
5
|
-
lock: () => void;
|
|
6
|
-
unlock: () => void;
|
|
7
|
-
};
|
|
8
|
-
export type MouseManager = ReturnType<typeof createMouseManager>;
|
|
9
|
-
export declare const handleMouseMove: (mouseManager: MouseManager) => () => void;
|
|
10
|
-
export declare const handleMouseEnter: (status: Status, mouseManager: MouseManager) => (e: MouseEvent) => void;
|
|
11
|
-
export declare const handleMouseLeave: () => (e: MouseEvent) => void;
|
|
12
|
-
export declare const handleClick: (status: Status, view: EditorView, dropdownElement: HTMLElement) => (e: Event) => void;
|
|
13
|
-
export declare const handleKeydown: (status: Status, view: EditorView, dropdownElement: HTMLElement, mouseManager: MouseManager) => (e: Event) => void;
|
|
14
|
-
//# sourceMappingURL=input.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/prose-plugin/input.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAGtD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEtC,eAAO,MAAM,kBAAkB;;;;CAY9B,CAAA;AACD,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEhE,eAAO,MAAM,eAAe,iBAAkB,YAAY,eAEzD,CAAA;AAED,eAAO,MAAM,gBAAgB,WAAY,MAAM,gBAAgB,YAAY,SAAS,UAAU,SAa7F,CAAA;AAED,eAAO,MAAM,gBAAgB,YAAa,UAAU,SAKnD,CAAA;AAED,eAAO,MAAM,WAAW,WACT,MAAM,QAAQ,UAAU,mBAAmB,WAAW,SAC3D,KAAK,KAAG,IA4BX,CAAA;AAEP,eAAO,MAAM,aAAa,WACX,MAAM,QAAQ,UAAU,mBAAmB,WAAW,gBAAgB,YAAY,SAAS,KAAK,SA4D1G,CAAA"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { EditorState } from '@milkdown/prose/state';
|
|
2
|
-
import type { EditorView } from '@milkdown/prose/view';
|
|
3
|
-
import { DecorationSet } from '@milkdown/prose/view';
|
|
4
|
-
import type { ThemeUtils } from '@milkdown/utils';
|
|
5
|
-
import type { Status } from './status';
|
|
6
|
-
export type Props = ReturnType<typeof createProps>;
|
|
7
|
-
export declare const createProps: (status: Status, utils: ThemeUtils) => {
|
|
8
|
-
handleKeyDown: (_: EditorView, event: Event) => boolean;
|
|
9
|
-
decorations: (state: EditorState) => DecorationSet | null;
|
|
10
|
-
};
|
|
11
|
-
//# sourceMappingURL=props.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/prose-plugin/props.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAc,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEtC,MAAM,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAA;AA4BlD,eAAO,MAAM,WAAW,WAAY,MAAM,SAAS,UAAU;uBAEtC,UAAU,SAAS,KAAK;yBAYtB,WAAW;CAkDnC,CAAA"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { StatusConfigBuilder, StatusConfigBuilderParams } from '..';
|
|
2
|
-
import type { Action } from '../item';
|
|
3
|
-
export interface StatusCtx {
|
|
4
|
-
placeholder: string | null;
|
|
5
|
-
actions: Action[];
|
|
6
|
-
}
|
|
7
|
-
export type Status = ReturnType<typeof createStatus>;
|
|
8
|
-
export declare const createStatus: (builder: StatusConfigBuilder) => {
|
|
9
|
-
get: () => StatusCtx;
|
|
10
|
-
clear: () => void;
|
|
11
|
-
update: (builderParams: StatusConfigBuilderParams) => StatusCtx;
|
|
12
|
-
isEmpty: () => boolean;
|
|
13
|
-
};
|
|
14
|
-
//# sourceMappingURL=status.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../src/prose-plugin/status.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,MAAM,IAAI,CAAA;AACxE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAGrC,MAAM,WAAW,SAAS;IACxB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,OAAO,EAAE,MAAM,EAAE,CAAA;CAClB;AASD,MAAM,MAAM,MAAM,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAA;AAEpD,eAAO,MAAM,YAAY,YAAa,mBAAmB;;;4BAS7B,yBAAyB;;CAQpD,CAAA"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { EditorView } from '@milkdown/prose/view';
|
|
2
|
-
import type { ThemeUtils } from '@milkdown/utils';
|
|
3
|
-
import type { Status } from './status';
|
|
4
|
-
export declare const defaultCalcPosition: (view: EditorView, dropdownElement: HTMLElement) => void;
|
|
5
|
-
export type CalcPosition = (view: EditorView, dropdownElement: HTMLElement) => void;
|
|
6
|
-
export declare const createView: (status: Status, view: EditorView, utils: ThemeUtils, className: string, calcPosition: CalcPosition) => {
|
|
7
|
-
update?: undefined;
|
|
8
|
-
destroy?: undefined;
|
|
9
|
-
} | {
|
|
10
|
-
update: (view: EditorView) => void;
|
|
11
|
-
destroy: () => void;
|
|
12
|
-
};
|
|
13
|
-
//# sourceMappingURL=view.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../src/prose-plugin/view.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAYjD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEtC,eAAO,MAAM,mBAAmB,SAAU,UAAU,mBAAmB,WAAW,SA4CjF,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,KAAK,IAAI,CAAA;AAEnF,eAAO,MAAM,UAAU,WACb,MAAM,QACR,UAAU,SACT,UAAU,aACN,MAAM,gBACH,YAAY;;;;mBAqBT,UAAU;;CAmB5B,CAAA"}
|
package/lib/style.d.ts
DELETED
package/lib/style.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,OAAO,EACP,YAAY,EACb,MAAM,gBAAgB,CAAA;AAgDvB,eAAO,MAAM,WAAW,iBAAkB,YAAY,WAAW,OAAO,WAsBvE,CAAA"}
|
package/lib/utility.d.ts
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { ThemeManager } from '@milkdown/core';
|
|
2
|
-
import type { Icon } from '@milkdown/design-system';
|
|
3
|
-
import type { Node } from '@milkdown/prose/model';
|
|
4
|
-
import type { Command } from '@milkdown/prose/state';
|
|
5
|
-
import type { ThemeUtils } from '@milkdown/utils';
|
|
6
|
-
export declare const createDropdown: (utils: ThemeUtils, className: string) => HTMLDivElement;
|
|
7
|
-
interface ItemOptions {
|
|
8
|
-
textClassName: string;
|
|
9
|
-
}
|
|
10
|
-
export declare const createDropdownItem: (themeManager: ThemeManager, text: string, icon: Icon, options?: Partial<ItemOptions>) => HTMLDivElement;
|
|
11
|
-
export declare const getDepth: (node: Node) => number;
|
|
12
|
-
export declare const cleanUpAndCreateNode: (createCommand: () => void) => Command;
|
|
13
|
-
export {};
|
|
14
|
-
//# sourceMappingURL=utility.d.ts.map
|
package/lib/utility.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utility.d.ts","sourceRoot":"","sources":["../src/utility.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAEnD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AACjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAIjD,eAAO,MAAM,cAAc,UAAW,UAAU,aAAa,MAAM,mBAclE,CAAA;AAED,UAAU,WAAW;IACnB,aAAa,EAAE,MAAM,CAAA;CACtB;AACD,eAAO,MAAM,kBAAkB,iBACf,YAAY,QACpB,MAAM,QACN,IAAI,YACA,QAAQ,WAAW,CAAC,mBAqB/B,CAAA;AAED,eAAO,MAAM,QAAQ,SAAU,IAAI,WASlC,CAAA;AAUD,eAAO,MAAM,oBAAoB,kBACX,MAAM,IAAI,KAAG,OAO5B,CAAA"}
|
package/src/config.ts
DELETED
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
/* Copyright 2021, Milkdown by Mirone. */
|
|
2
|
-
import type { Ctx } from '@milkdown/core'
|
|
3
|
-
import { commandsCtx, editorViewCtx, schemaCtx, themeManagerCtx } from '@milkdown/core'
|
|
4
|
-
import type { Node } from '@milkdown/prose/model'
|
|
5
|
-
import type { EditorState } from '@milkdown/prose/state'
|
|
6
|
-
|
|
7
|
-
import type { WrappedAction } from './item'
|
|
8
|
-
import { createDropdownItem } from './utility'
|
|
9
|
-
|
|
10
|
-
type Nullable<T> = T | null | undefined
|
|
11
|
-
|
|
12
|
-
export interface StatusConfig {
|
|
13
|
-
placeholder?: Nullable<string>
|
|
14
|
-
actions?: Nullable<WrappedAction[]>
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export interface StatusConfigBuilderParams {
|
|
18
|
-
content: string
|
|
19
|
-
isTopLevel: boolean
|
|
20
|
-
parentNode: Node
|
|
21
|
-
state: EditorState
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export type StatusConfigBuilder = (params: StatusConfigBuilderParams) => Nullable<StatusConfig>
|
|
25
|
-
|
|
26
|
-
export type Config = (ctx: Ctx) => StatusConfigBuilder
|
|
27
|
-
|
|
28
|
-
export const defaultActions = (ctx: Ctx, input = '/'): WrappedAction[] => {
|
|
29
|
-
const { nodes } = ctx.get(schemaCtx)
|
|
30
|
-
const actions: Array<WrappedAction & { keyword: string[]; typeName: string }> = [
|
|
31
|
-
{
|
|
32
|
-
id: 'h1',
|
|
33
|
-
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Large Heading', 'h1'),
|
|
34
|
-
command: () => ctx.get(commandsCtx).call('TurnIntoHeading', 1),
|
|
35
|
-
keyword: ['h1', 'large heading'],
|
|
36
|
-
typeName: 'heading',
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
id: 'h2',
|
|
40
|
-
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Medium Heading', 'h2'),
|
|
41
|
-
command: () => ctx.get(commandsCtx).call('TurnIntoHeading', 2),
|
|
42
|
-
keyword: ['h2', 'medium heading'],
|
|
43
|
-
typeName: 'heading',
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
id: 'h3',
|
|
47
|
-
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Small Heading', 'h3'),
|
|
48
|
-
command: () => ctx.get(commandsCtx).call('TurnIntoHeading', 3),
|
|
49
|
-
keyword: ['h3', 'small heading'],
|
|
50
|
-
typeName: 'heading',
|
|
51
|
-
},
|
|
52
|
-
{
|
|
53
|
-
id: 'bulletList',
|
|
54
|
-
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Bullet List', 'bulletList'),
|
|
55
|
-
command: () => ctx.get(commandsCtx).call('WrapInBulletList'),
|
|
56
|
-
keyword: ['bullet list', 'ul'],
|
|
57
|
-
typeName: 'bullet_list',
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
id: 'orderedList',
|
|
61
|
-
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Ordered List', 'orderedList'),
|
|
62
|
-
command: () => ctx.get(commandsCtx).call('WrapInOrderedList'),
|
|
63
|
-
keyword: ['ordered list', 'ol'],
|
|
64
|
-
typeName: 'ordered_list',
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
id: 'taskList',
|
|
68
|
-
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Task List', 'taskList'),
|
|
69
|
-
command: () => ctx.get(commandsCtx).call('TurnIntoTaskList'),
|
|
70
|
-
keyword: ['task list', 'task'],
|
|
71
|
-
typeName: 'task_list_item',
|
|
72
|
-
},
|
|
73
|
-
{
|
|
74
|
-
id: 'image',
|
|
75
|
-
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Image', 'image'),
|
|
76
|
-
command: () => ctx.get(commandsCtx).call('InsertImage'),
|
|
77
|
-
keyword: ['image'],
|
|
78
|
-
typeName: 'image',
|
|
79
|
-
},
|
|
80
|
-
{
|
|
81
|
-
id: 'blockquote',
|
|
82
|
-
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Quote', 'quote'),
|
|
83
|
-
command: () => ctx.get(commandsCtx).call('WrapInBlockquote'),
|
|
84
|
-
keyword: ['quote', 'blockquote'],
|
|
85
|
-
typeName: 'blockquote',
|
|
86
|
-
},
|
|
87
|
-
{
|
|
88
|
-
id: 'table',
|
|
89
|
-
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Table', 'table'),
|
|
90
|
-
command: () => ctx.get(commandsCtx).call('InsertTable'),
|
|
91
|
-
keyword: ['table'],
|
|
92
|
-
typeName: 'table',
|
|
93
|
-
},
|
|
94
|
-
{
|
|
95
|
-
id: 'code',
|
|
96
|
-
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Code Fence', 'code'),
|
|
97
|
-
command: () => ctx.get(commandsCtx).call('TurnIntoCodeFence'),
|
|
98
|
-
keyword: ['code'],
|
|
99
|
-
typeName: 'fence',
|
|
100
|
-
},
|
|
101
|
-
{
|
|
102
|
-
id: 'divider',
|
|
103
|
-
dom: createDropdownItem(ctx.get(themeManagerCtx), 'Divide Line', 'divider'),
|
|
104
|
-
command: () => ctx.get(commandsCtx).call('InsertHr'),
|
|
105
|
-
keyword: ['divider', 'hr'],
|
|
106
|
-
typeName: 'hr',
|
|
107
|
-
},
|
|
108
|
-
]
|
|
109
|
-
|
|
110
|
-
const userInput = input.slice(1).toLocaleLowerCase()
|
|
111
|
-
|
|
112
|
-
return actions
|
|
113
|
-
.filter(action => !!nodes[action.typeName] && action.keyword.some(keyword => keyword.includes(userInput)))
|
|
114
|
-
.map(({ keyword, typeName, ...action }) => action)
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
export const defaultConfig: Config = (ctx) => {
|
|
118
|
-
return ({ content, isTopLevel }) => {
|
|
119
|
-
if (!isTopLevel)
|
|
120
|
-
return null
|
|
121
|
-
|
|
122
|
-
const view = ctx.get(editorViewCtx)
|
|
123
|
-
if (!view?.editable)
|
|
124
|
-
return null
|
|
125
|
-
|
|
126
|
-
if (!content)
|
|
127
|
-
return { placeholder: 'Type / to use the slash commands...' }
|
|
128
|
-
|
|
129
|
-
if (content.startsWith('/')) {
|
|
130
|
-
return content === '/'
|
|
131
|
-
? {
|
|
132
|
-
placeholder: 'Type to filter...',
|
|
133
|
-
actions: defaultActions(ctx),
|
|
134
|
-
}
|
|
135
|
-
: {
|
|
136
|
-
actions: defaultActions(ctx, content),
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
return null
|
|
141
|
-
}
|
|
142
|
-
}
|
package/src/item.ts
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/* Copyright 2021, Milkdown by Mirone. */
|
|
2
|
-
import type { Command } from '@milkdown/prose/state'
|
|
3
|
-
|
|
4
|
-
import { cleanUpAndCreateNode } from './utility'
|
|
5
|
-
|
|
6
|
-
export interface Action {
|
|
7
|
-
id: string
|
|
8
|
-
$: HTMLElement
|
|
9
|
-
command: Command
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export type WrappedAction = Pick<Action, 'id'> & {
|
|
13
|
-
command: () => void
|
|
14
|
-
dom: HTMLElement
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export const transformAction = (action: WrappedAction): Action => ({
|
|
18
|
-
id: action.id,
|
|
19
|
-
$: action.dom,
|
|
20
|
-
command: cleanUpAndCreateNode(action.command),
|
|
21
|
-
})
|