-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(schema): initial prefix slash implementation
- Loading branch information
Showing
6 changed files
with
483 additions
and
231 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| /* Copyright 2021, Milkdown by Mirone. */ | ||
| import type { SliceType } from '@milkdown/ctx' | ||
| import type { PluginSpec } from '@milkdown/prose/state' | ||
| import { Plugin, PluginKey } from '@milkdown/prose/state' | ||
| import type { $Ctx, $Prose } from '@milkdown/utils' | ||
| import { $ctx, $prose } from '@milkdown/utils' | ||
|
|
||
| /// @internal | ||
| export type SlashPluginSpecId<Id extends string> = `${Id}_SLASH_SPEC` | ||
|
|
||
| /// @internal | ||
| export type SlashPlugin<Id extends string, State = any> = [ | ||
| $Ctx<PluginSpec<State>, SlashPluginSpecId<Id>>, | ||
| $Prose | ||
| ] & { | ||
| key: SliceType<PluginSpec<State>, SlashPluginSpecId<Id>> | ||
| pluginKey: $Prose['key'] | ||
| } | ||
|
|
||
| /// Create a slash plugin with a unique id. | ||
| export const slashFactory = <Id extends string, State = any>(id: Id) => { | ||
| const slashSpec = $ctx<PluginSpec<State>, SlashPluginSpecId<Id>>( | ||
| {}, | ||
| `${id}_SLASH_SPEC` | ||
| ) | ||
| const slashPlugin = $prose((ctx) => { | ||
| const spec = ctx.get(slashSpec.key) | ||
| return new Plugin({ | ||
| key: new PluginKey(`${id}_SLASH`), | ||
| ...spec, | ||
| }) | ||
| }) | ||
| const result = [slashSpec, slashPlugin] as SlashPlugin<Id> | ||
| result.key = slashSpec.key | ||
| result.pluginKey = slashPlugin.key | ||
| slashSpec.meta = { | ||
| package: '@milkdown/plugin-slash', | ||
| displayName: `Ctx<slashSpec>|${id}`, | ||
| } | ||
| slashPlugin.meta = { | ||
| package: '@milkdown/plugin-slash', | ||
| displayName: `Prose<slash>|${id}`, | ||
| } | ||
|
|
||
| return result | ||
| } |
176 changes: 176 additions & 0 deletions
176
packages/plugin-schemas/src/plugins/slash/slash-provider.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,176 @@ | ||
| // Wrapper of original milkdown-plugin-slash | ||
| /* Copyright 2021, Milkdown by Mirone. */ | ||
| import { findParentNode, posToDOMRect } from '@milkdown/prose' | ||
| import type { EditorState } from '@milkdown/prose/state' | ||
| import type { Node } from '@milkdown/prose/model' | ||
| import { TextSelection } from '@milkdown/prose/state' | ||
| import type { EditorView } from '@milkdown/prose/view' | ||
| import debounce from 'lodash.debounce' | ||
| import type { Instance, Props } from 'tippy.js' | ||
| import tippy from 'tippy.js' | ||
|
|
||
| /// Options for slash provider. | ||
| export type SlashProviderOptions = { | ||
| /// The slash content. | ||
| content: HTMLElement | ||
| /// The options for creating [tippy.js](https://atomiks.github.io/tippyjs/) instance. | ||
| tippyOptions?: Partial<Props> | ||
| /// The debounce time for updating slash, 200ms by default. | ||
| debounce?: number | ||
| /// The function to determine whether the tooltip should be shown. | ||
| shouldShow?: (view: EditorView, prevState?: EditorState) => boolean | ||
|
|
||
| prefix?: string[] | ||
|
|
||
| marks?: { prefix: string; links: { name: string; id: string }[] }[] | ||
|
|
||
| markActive?: { prefix: string; links: { name: string; id: string }[] } | ||
| } | ||
|
|
||
| /// A provider for creating slash. | ||
| export class SlashProvider { | ||
| /// The root element of the slash. | ||
| element: HTMLElement | ||
|
|
||
| /// @internal | ||
| #tippy: Instance | undefined | ||
|
|
||
| /// @internal | ||
| #tippyOptions: Partial<Props> | ||
|
|
||
| /// @internal | ||
| #debounce: number | ||
|
|
||
| /// @internal | ||
| #marks: { prefix: string; links: { name: string; id: string }[] }[] | ||
|
|
||
| /// @internal | ||
| #markActive?: { prefix: string; links: { name: string; id: string }[] } | ||
|
|
||
| /// @internal | ||
| #shouldShow: (view: EditorView, prevState?: EditorState) => boolean | ||
|
|
||
| constructor(options: SlashProviderOptions) { | ||
| this.element = options.content | ||
| this.#tippyOptions = options.tippyOptions ?? {} | ||
| this.#debounce = options.debounce ?? 100 | ||
| this.#shouldShow = options.shouldShow ?? this.#_shouldShow | ||
| this.#marks = options.marks ?? [] | ||
| this.#markActive = options.marks ? options.marks[0] : undefined | ||
| } | ||
|
|
||
| /// @internal | ||
| #onUpdate = (view: EditorView, prevState?: EditorState): void => { | ||
| const { state, composing } = view | ||
| const { selection, doc } = state | ||
| const { ranges } = selection | ||
| const from = Math.min(...ranges.map((range) => range.$from.pos)) | ||
| const to = Math.max(...ranges.map((range) => range.$to.pos)) | ||
| const isSame = | ||
| prevState && prevState.doc.eq(doc) && prevState.selection.eq(selection) | ||
|
|
||
| this.#tippy ??= tippy(view.dom, { | ||
| trigger: 'manual', | ||
| placement: 'bottom-start', | ||
| interactive: true, | ||
| ...this.#tippyOptions, | ||
| content: this.element, | ||
| }) | ||
|
|
||
| if (composing || isSame) return | ||
|
|
||
| if (!this.#shouldShow(view, prevState)) { | ||
| this.hide() | ||
| return | ||
| } | ||
|
|
||
| this.#tippy.setProps({ | ||
| getReferenceClientRect: () => posToDOMRect(view, from, to), | ||
| }) | ||
|
|
||
| this.show() | ||
| } | ||
|
|
||
| /// @internal | ||
| #_shouldShow(view: EditorView): boolean { | ||
| const currentTextBlockContent = this.getContent(view) | ||
|
|
||
| if (!currentTextBlockContent) return false | ||
|
|
||
| const mark = this.#marks.find( | ||
| (item) => currentTextBlockContent.at(-1) === item.prefix | ||
| ) | ||
|
|
||
| if (mark) { | ||
| this.#markActive = this.#marks.find((mark) => mark.prefix === mark.prefix) | ||
| } | ||
|
|
||
| return !!mark | ||
| } | ||
|
|
||
| /// Update provider state by editor view. | ||
| update = (view: EditorView, prevState?: EditorState): void => { | ||
| const updater = debounce(this.#onUpdate, this.#debounce) | ||
|
|
||
| updater(view, prevState) | ||
| } | ||
|
|
||
| /// Get the content of the current text block. | ||
| /// Pass the `matchNode` function to determine whether the current node should be matched, by default, it will match the paragraph node. | ||
| getContent = ( | ||
| view: EditorView, | ||
| matchNode: (node: Node) => boolean = (node) => | ||
| node.type.name === 'paragraph' | ||
| ): string | undefined => { | ||
| const { selection } = view.state | ||
| const { empty } = selection | ||
| const isTextBlock = view.state.selection instanceof TextSelection | ||
|
|
||
| const isSlashChildren = this.element.contains(document.activeElement) | ||
|
|
||
| const notHasFocus = !view.hasFocus() && !isSlashChildren | ||
|
|
||
| const isReadonly = !view.editable | ||
|
|
||
| const paragraph = findParentNode(matchNode)(view.state.selection) | ||
|
|
||
| const isNotInParagraph = !paragraph | ||
|
|
||
| if (notHasFocus || isReadonly || !empty || !isTextBlock || isNotInParagraph) | ||
| return | ||
|
|
||
| return paragraph.node.textContent | ||
| } | ||
|
|
||
| /// Destroy the slash. | ||
| destroy = () => { | ||
| this.#tippy?.destroy() | ||
| } | ||
|
|
||
| /// Show the slash. | ||
| show = () => { | ||
| this.element.innerHTML = | ||
| this.#markActive?.links.reduce((acc, item) => { | ||
| return (acc += `<div id=\"${ | ||
| item.id | ||
| }\" class=\"flex flex-col gap-2 bg-theme-background-3 p-2\">${ | ||
| this.#markActive?.prefix ?? '' | ||
| } ${item.name}</div>`) | ||
| }, '<div class="bg-theme-background-2 wb-text w-full p-2 cursor-pointer min-w-20">') ?? | ||
| '<div>' | ||
| this.element.innerHTML = this.element.innerHTML += '</div>' | ||
| this.element.onclick = (e) => { | ||
| this.hide() | ||
| } | ||
|
|
||
| this.#tippy?.show() | ||
| } | ||
|
|
||
| /// Hide the slash. | ||
| hide = () => { | ||
| this.#tippy?.hide() | ||
| } | ||
|
|
||
| /// Get the [tippy.js](https://atomiks.github.io/tippyjs/) instance. | ||
| getInstance = () => this.#tippy | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.