-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #56 from sveltor/feat/floating-renderer
Feat/floating renderer
- Loading branch information
Showing
14 changed files
with
360 additions
and
412 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| '@nextlint/svelte': minor | ||
| '@nextlint/core': minor | ||
| --- | ||
|
|
||
| implement FloatingRenderer component |
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 |
|---|---|---|
|
|
@@ -58,7 +58,6 @@ | |
| .concat(extensions) | ||
| .filter(Boolean) | ||
| }); | ||
| console.log('test111'); | ||
| </script> | ||
|
|
||
| <div use:render /> | ||
|
|
||
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 |
|---|---|---|
| @@ -1,2 +1,6 @@ | ||
| export {default as SvelteEditor} from './Editor.svelte'; | ||
| export {default as EditorTheme} from './EditorTheme.svelte'; | ||
| import {Editor} from '@tiptap/core'; | ||
|
|
||
| import SvelteEditor from './Editor.svelte'; | ||
| import EditorTheme from './EditorTheme.svelte'; | ||
|
|
||
| export {EditorTheme, SvelteEditor, Editor}; |
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,87 @@ | ||
| import { | ||
| computePosition, | ||
| shift, | ||
| type ComputePositionConfig, | ||
| type ReferenceElement, | ||
| flip, | ||
| offset | ||
| } from '@floating-ui/dom'; | ||
| import type {Editor} from '@tiptap/core'; | ||
| import type {Mark, Node} from '@tiptap/pm/model'; | ||
| import {getContext, type ComponentType, type SvelteComponent} from 'svelte'; | ||
|
|
||
| export const FLOATING_CONTEXT_KEY = Symbol.for('svelteFloatingProps'); | ||
|
|
||
| export type FloatingMountProps<FNode, FMark> = { | ||
| element: ReferenceElement; | ||
| pos: number; | ||
| mark: FMark; | ||
| node: FNode; | ||
| }; | ||
| export type SvelteFloatingProps<FNode, FMark> = { | ||
| editor: Editor; | ||
| onHide: () => void; | ||
| } & FloatingMountProps<FNode, FMark>; | ||
|
|
||
| export class FloatingRenderer<FNode extends Node, FMark extends Mark> { | ||
| private wrapper: HTMLElement; | ||
| private svelteRenderer: SvelteComponent | null = null; | ||
|
|
||
| constructor( | ||
| private readonly opts: {component: ComponentType; editor: Editor}, | ||
| private readonly floatingOptions?: Partial<ComputePositionConfig> | ||
| ) { | ||
| this.wrapper = document.createElement('div'); | ||
| Object.assign(this.wrapper.style, { | ||
| opacity: 0, | ||
| position: 'absolute', | ||
| transition: 'opacity 0.2s ease-in-out' | ||
| }); | ||
| document.body.appendChild(this.wrapper); | ||
| } | ||
|
|
||
| async mount(props: FloatingMountProps<FNode, FMark>) { | ||
| const {element} = props; | ||
| this.svelteRenderer?.$destroy(); | ||
| this.svelteRenderer = new this.opts.component({ | ||
| target: this.wrapper, | ||
| context: new Map([ | ||
| [ | ||
| FLOATING_CONTEXT_KEY, | ||
| { | ||
| ...props, | ||
| onHide: () => this.unmount(), | ||
| editor: this.opts.editor | ||
| } | ||
| ] | ||
| ]) | ||
| }); | ||
| const {x, y} = await computePosition(element, this.wrapper, { | ||
| ...this.floatingOptions, | ||
| placement: 'top', | ||
| middleware: [flip(), shift(), offset(10)] | ||
| }); | ||
| Object.assign(this.wrapper.style, { | ||
| left: `${x}px`, | ||
| top: `${y}px` | ||
| }); | ||
| requestAnimationFrame(() => { | ||
| this.wrapper.style.opacity = '1'; | ||
| }); | ||
| } | ||
| async unmount() { | ||
| this.svelteRenderer?.$destroy(); | ||
| this.svelteRenderer = null; | ||
| } | ||
| async destroy() { | ||
| this.unmount?.(); | ||
| this.wrapper?.remove?.(); | ||
| } | ||
| } | ||
|
|
||
| export function useFloatingProps<FNode, FMark>(): SvelteFloatingProps< | ||
| FNode, | ||
| FMark | ||
| > { | ||
| return getContext(FLOATING_CONTEXT_KEY); | ||
| } |
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 |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| export * from './SvelteNodeViewRenderer'; | ||
| export * from './SvelteRenderer'; | ||
| export * from './FloatingRenderer'; |
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
Oops, something went wrong.